@codespec/react-toolset

Set of common React UI components

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
81Oct 30, 2017Aug 12, 2017Minified + gzip package size for @codespec/react-toolset in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.