wix-style-react
is a collection of React components that conform to Wix Style created by Wix UX guild.
- Install with
npm
oryarn
:
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.