@codespec/react-toolset

React Toolset

Independent set of React UI Components for your application.

Install

# npm users
$ npm i --save @codespec/react-toolset

# yarn users
$ yarn add @codespec/react-toolset

Documentation

• https://codespec.github.io/react-toolset/docs/

How to use

When using compiled source

import { Button } from '@codespec/react-toolset'

When using not complied source

1. Set up Webpack configuration

// Add this loaders in your webpack.config.js
// You should not exclude node_modules directory from it.
// This is just an example.
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel-loader',
      query: {
        cacheDirectory: true,
        presets: ['es2015', 'react'],
      },
    },
    {
      test: /\.scss$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules:true,
            localIdentName: '[local]-[hash:base64:5]'
          }
        },
        {
          loader: 'sass-loader',
          options: {
            plugins: () => [require('autoprefixer')]
          }
        }
      ]
    },
  ]
}

2. Import individual component from your application

import { Button } from '@codespec/react-toolset/src'

If you are using create-react-app, use need to follow this.

1. Eject your predefined configuration

yarn eject

2. Configure the Webpack like as follow

// Process JS with Babel.
{
  test: /\.(js|jsx)$/,
  include: [paths.appSrc, /node_modules\/@codespec/],     // add @codespec module to include
  loader: require.resolve('babel-loader'),
  options: {

    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
  },
},

3. Configure SCSS as above