@codespec/react-toolset v0.1.6

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