? Install
npm install wix-style-react
yarn add wix-style-react
? Setup
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:
<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"
.
.
wix-style-react v6.x migration note:
If you're using wix-style-react 6.x and want to shift to 7.x version then read our migration guide.
Previous version documentation: https://wix-wix-style-react-v6.surge.sh/
? Usage
import { Button } from 'wix-style-react';
const App = () => (
<Button>
Click me!
</Button>
);
? Testkits
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
await inputDriver.enterText('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
⌨️ Typescript
The library is javascript based but types are supported with d.ts files. Not all components have types defined, but it is ongoing process to make it so.
Additional type interfaces are added in a separate repo called: wsr-types in order not to break our existing users. Read more on the repo description: https://github.com/wix/wix-ui/tree/master/packages/wsr-types
? Contributing 
We welcome contributions to Wix-Style-React!
Read our contributing guide and help us build or improve our components.
? License
This project is offered under MIT License.