@codespec/react-toolset

React component library

Showing:

Popularity

Downloads/wk

0

GitHub Stars

8

Maintenance

Last Commit

4yrs ago

Contributors

3

Package

Dependencies

19

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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')]
              }
            }
          ]
        },
      ]
    }
    
  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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial