https://github.com/codespec/react-toolset
React component library
https://github.com/codespec/react-toolset
javascript react toolset ui-components
Last synced: 6 months ago
JSON representation
React component library
- Host: GitHub
- URL: https://github.com/codespec/react-toolset
- Owner: codespec
- License: mit
- Created: 2017-08-12T05:06:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-30T22:28:11.000Z (about 8 years ago)
- Last Synced: 2025-06-15T15:55:17.361Z (7 months ago)
- Topics: javascript, react, toolset, ui-components
- Language: JavaScript
- Size: 2.38 MB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
React Toolset
[](https://travis-ci.org/codespec/react-toolset)
[](https://www.npmjs.com/package/@codespec/react-toolset)
[](https://www.npmjs.com/package/@codespec/react-toolset)
Independent set of React UI Components for your application.
## Install
```sh
# 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
```js
import { Button } from '@codespec/react-toolset'
```
### When using not complied source
1. Set up Webpack configuration
```js
// 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
```jsx
import { Button } from '@codespec/react-toolset/src'
```
### If you are using `create-react-app`, use need to follow this.
1. Eject your predefined configuration
```sh
yarn eject
```
2. Configure the Webpack like as follow
```js
// 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