react-toolset

React Toolset

React Toolset

Build Status npm npm

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

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')]
            }
          }
        ]
      },
    ]
  }
  1. 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
  1. 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,
    },
  },
  1. Configure SCSS as above
This site is open source. Improve this page.