A collection of React components that conform to Wix Style.
Support Channel: #wix-style-react
npm install wix-style-react
yarn add wix-style-react
wix-style-react is built with Stylable, therefore we recommend you build your project using a Stylable compatible template in order to save some configurations. Take a look at our usage guide Create Stylable App to create a new Stylable project from a boilerplate.
wix-style-react requires react version 16.14.0
and up.
For typescript users version ^3.9.7
is required.
- Google Chrome (version 92 and above)
- Safari for Mac (version 14 and above)
- Microsoft Edge (version 100 and above)
- Firefox (version 91 and above)
All wix-style-rect applications start with a WixStyleReactProvider. The Provider injects MadeFor font and enables font smoothing.
import {WixStyleReactProvider, Button} from 'wix-style-react';
const App = () => (
<WixStyleReactProvider>
<Button>Hello World!</Button>
</WixStyleReactProvider>
);
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 { InputTestkit } from 'wix-style-react/dist/testkit';
// 2. initialize
const inputDriver = InputTestkit({
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.
Check out our support guide
This project is offered under MIT License.