A collection of React components that conform to Wix Style.
npm install wix-style-react
yarn add wix-style-react
If ๐yoshi build runner is used for your application then all required loaders are already defined. If you'd rather set up your project manually, take a look at our webpack guide.
Minimal Yoshi version to be used with wix-style-react:
Version 4 - ^4.1.0
Version 3 - ^3.31.2
Load Wix fonts from CDN:
- For Madefor font please visit wix-fonts.
- For Helvetica Neue:
<link rel="stylesheet" href="//static.parastorage.com/services/third-party/fonts/Helvetica/fontFace.css" />
Enable font smoothing with browser specific css properties:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Make sure that react and react-dom versions are not higher then:
//package.json
.
.
"react":"16.8.3",
"react-dom":"16.8.3"
.
.
Read and follow our migration guides:
- From 7.x to 8.x read V8 migration guide
- From 6.x to 7.x read V7 migration guide
- From 5.x to 6.x read V6 migration guide
- From 4.x to 5.x read V5 migration guide
Older version Storybook:
import { Button } from 'wix-style-react';
const App = () => (
<Button>
Click me!
</Button>
);
All our components are provided with testkits that help our users test them.
A component testkit provides an interface to the component, enabling automated tests to access component functions without needing to know precise details of the technology being used.
// Here is an example
// 1. import
import { inputTestkitFactory } from 'wix-style-react/dist/testkit';
// 2. initialize
const inputDriver = inputTestkitFactory({
wrapper: document.body,
dataHook: 'name-input',
});
// 3. interact
it('test', async () => {
await inputDriver.enterText('hello world');
expect(await inputDriver.getText()).toBe('hello world');
});
All methods are documented in our storybook components stories and some can be viewed through typescript interface.
Our testkits currently support four major testing frameworks: react-jsdom
, protractor
, puppeteer
and selenium
. Read our testing guidelines
The library is javascript based but types are supported with d.ts
files.
You should get the types automatically when installing wix-style-react
.
For any issues, check out our types FAQ
We welcome contributions to Wix-Style-React!
Read our contributing guide and help us build or improve our components.
This project is offered under MIT License.