wix-style-react is a collection of React components that conform to Wix Style created by Wix UX guild.

• Install with npm or yarn:

npm i wix-style-react
# OR
yarn add wix-style-react

• 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, for example:

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

import React from 'react';
import Button from 'wix-style-react/Button';

const App = () => (
    <Button onClick={() => console.log('thanks for clicking :)')}>
      Click me!
    </Button>
);

wix-style-react uses Stylable, SASS and CSS Modules configuration by default. in order to use wix-style-react, your module bundler should be configured accordingly. Use Yoshi as build tool to avoid configuration. Otherwise, you should configure it on your own.

• Run

  $ npm run eject
  $ npm i -D node-sass stylable @stylable/webpack-plugin @stylable/core

• Enhance webpack configuration

  // config/webpack.config.js    
  const {StylableWebpackPlugin} = require('@stylable/webpack-plugin');
  //...
  {
    //...
    module: {
      rules: [
        {
          exclude: /\.st.css$/, //This must appear before the "oneOf" property
          oneOf: [
            //...
            {
              test: sassRegex,
              include: [
                path.join(__dirname, '../node_modules/wix-animations'),
                path.join(__dirname, '../node_modules/wix-style-react'),
                path.join(__dirname, '../node_modules/bootstrap-sass')
              ],
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  modules: true,
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  camelCase: true,
                  localIdentName:'[name]__[local]___[hash:base64:5]',
                },
                'sass-loader'
              ),
              sideEffects: true,
            },
          ]
        },
      ],
      plugins: [
        //...
        new StylableWebpackPlugin({
           experimentalHMR: true,
           useEntryModuleInjection: true
         }),
      ]
    //...
    }
  }

• Refer to Stylable Docs regarding Typescript configuration

All of wix-style-react components are 100% tested and supplies test drivers for easy interactions in your tests. Read more about Components Drivers

Please refer to the Troubleshooting page

Please refer to the Contributing page

This project is offered under MIT License.