wix-style-react
is a collection of React components that conform to Wix Style created by Wix UX guild.
Demo | Source | Playground
Installation
- Install with
npm
oryarn
:
npm i wix-style-react# OR yarn add wix-style-react
Prerequisites
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.
create-react-app
configuration
Example of -
Run
$ npm run eject$ npm i -D node-sass stylable @stylable/webpack-plugin @stylable/core -
Enhance
webpack
configuration// config/webpack.config.js//...modules:rules:exclude: /\.st.css$/ //This must appear before the "oneOf" propertyoneOf://...test: sassRegexinclude:pathpathpathexclude: sassModuleRegexuse:sideEffects: trueplugins://...experimentalHMR: trueuseEntryModuleInjection: true//...
Typescript support
- Refer to Stylable Docs regarding Typescript configuration
Usage
Requirements
- Load Wix fonts from CDN
Usage
import React from 'react';import Button from 'wix-style-react/Button'; const App = <Button => Click me! </Button>;
Tips
- Use Yoshi as build tool to avoid configuration. Otherwise follow webpack setup instructions here
- Enable font smoothing with browser specific css properties, for example:
- Use demo pages to find all available components with examples.
Contributing
Please refer to the Contributing page
License
This project is offered under MIT License.