# react-bluekit
> Visualisation and Playground generated from Components
Latest version **0.4.4** (published 2017-10-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-bluekit
pnpm add react-bluekit
yarn add react-bluekit
bun add react-bluekit
```
Provides the command `bluekit`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support; pre 1.0.
Negative: insecure dependencies; abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.4.4 |
| Published | 2017-10-25 |
| First published | 2016-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 17 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| Author | Ondrej Bartas |
| Maintainers | blueberrynpm, tomvaisar, jmarsicek, imtoo, ondrejbartas |
| Keywords | es6, es7, babel, react-component, typescript, visualization, playground, development, ui-ki, ui, design, node |
## Links
- npm: https://www.npmjs.com/package/react-bluekit
- Repository: https://github.com/blueberryapps/react-bluekit
- Homepage: https://github.com/blueberryapps/react-bluekit#readme
- Issues: https://github.com/blueberryapps/react-bluekit/issues
- npm.io page: https://npm.io/package/react-bluekit
## Dependencies (17)
- [gulp](https://npm.io/package/gulp.md) >=3
- [color](https://npm.io/package/color.md) >=0.10
- [fuzzy](https://npm.io/package/fuzzy.md) >=0.1
- [lodash](https://npm.io/package/lodash.md) ^4.16.6
- [radium](https://npm.io/package/radium.md) >=0.15
- [nunjucks](https://npm.io/package/nunjucks.md) >=2
- [tosource](https://npm.io/package/tosource.md) >=1
- [immutable](https://npm.io/package/immutable.md) 3.8.1
- [react-ace](https://npm.io/package/react-ace.md) >=3
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [gulp-eslint](https://npm.io/package/gulp-eslint.md) ^3.0.1
- [react-color](https://npm.io/package/react-color.md) >=2
- [react-docgen](https://npm.io/package/react-docgen.md) >=2.14.0
- [react-highlight](https://npm.io/package/react-highlight.md) >=0.5
- [react-responsive](https://npm.io/package/react-responsive.md) ^1.1.3
- [react-copy-to-clipboard](https://npm.io/package/react-copy-to-clipboard.md) >=4
- [react-docgen-typescript](https://npm.io/package/react-docgen-typescript.md) git+https://github.com/imtoo/react-docgen-typescript.git
## Alternatives
- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads
## Recent versions
- 0.4.4 (latest) — 2017-10-25
- 0.4.0 (-typescript06) — 2017-03-01
- 0.4.3 — 2017-04-13
- 0.4.2 — 2017-03-19
- 0.4.1 — 2017-03-01
- 0.4.0-typescript07 — 2017-03-01
- 0.4.0-typescript06 — 2017-03-01
- 0.4.0-typescript05 — 2017-02-16
- 0.4.0-typescript04 — 2017-02-16
- 0.4.0-typescript03 — 2017-02-16
- 0.3.2 — 2017-02-14
- 0.4.0-typescript02 — 2017-02-01
- 0.4.0-typescript01 — 2017-02-01
- 0.4.0-typescript — 2017-02-01
- 0.3.1 — 2016-11-24
- … 51 more at https://npm.io/package/react-bluekit/versions
## README
# React BlueKit [](https://circleci.com/gh/blueberryapps/react-bluekit/tree/master) [](https://dependencyci.com/github/blueberryapps/react-bluekit)
BlueKit automatically generates a library from your React components with editable props and live preview.
Point BlueKit to folders with your React components and it will generate a library for you. You'll be able to browse through the components, tweak their props, and see the changes live. Furthermore, any changes that you make to your components' code will be reflected in the library.
DEMO here: [http://bluekit.blueberry.io](http://bluekit.blueberry.io)
## Install
```sh
$ npm install --save react-bluekit
```
You can use BlueKit via npm script or gulp
## Npm script
```js
"scripts": {
"bluekit": "bluekit --baseDir ./components --paths . --exclude \"./(Layout|StyledComponent).tsx\""
}
```
## Gulpfile configuration
```js
import createBlueKit from 'react-bluekit/lib/createBlueKit';
createBlueKit({
// your directory where components are located
baseDir: `${__dirname}/src/browser`,
// relative paths from base dir where to look for components
paths: ['./components/', './auth'],
// relative paths from base dir of files or directories you want to exclude from indexing
exclude: ['./components/Foo'],
// set to true when providing simple components such as `export default function MyComponent() { Hello
}`
noSpecialReplacements: true
});
```
This will provide you with two gulp tasks: `build-bluekit` and `watch-bluekit`, which perform static analysis of your components.
You can setup the build of BlueKit on application start and then watch components for changes by editing the `default` task to:
```js
// from gulp.task('default', ['server']); to:
gulp.task('default', ['build-bluekit', 'server', 'watch-bluekit']);
```
Do not forget to add it to build process (for example on stage or production):
```js
gulp.task('build', ['build-bluekit', 'build-webpack']);
// make sure that component build is before webpack
```
It will be built when needed.
## Add it to your project
Look at the `example` directory, you only need to add:
```js
import BlueKit from 'react-bluekit';
import componentsIndex from '../componentsIndex';
import React, { Component } from 'react';
export default class PageWithBlueKit extends Component {
render() {
return (
);
}
}
```
You can also pass `children` to BlueKit, which will be displayed above the search field (e.g. for themes or other stuff).
To add jsdoc **descriptions** see example [example_components/Checkbox.react.js](https://github.com/blueberryapps/react-bluekit/blob/master/example_components/Checkbox.react.js).
## Typescript support
Bluekit automatically finds `.tsx` files and uses [react-docgen-typescript](https://github.com/imtoo/react-docgen-typescript) parser for it.
## BlueKit development
```
npm install
cd ./example
npm install
gulp
open http://localhost:3000
```
This will start the development server and then you can play with components in BlueKit.
## Gulp tasks
```
# generate svg icons from src/icons directory
gulp svg-icon
# run unit tests
gulp ava
# run eslint
gulp eslint
```
## Additional info
BlueKit automatically hides props that don’t affect the component’s look.
If you get some kind of weird error and BlueKit doesn't load at all, try to reset localStorage by running `localStorage.clear();`.
## Made with love by
[](https://www.blueberry.io)
---
_Source: https://npm.io/package/react-bluekit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._