Overview:

React BlueKit is a tool that automatically generates a library from React components. It allows users to browse through components, tweak their props, and see the changes live. Any changes made to the components' code will be reflected in the library.

Features:

Automatic generation of libraries from React components
Editable props for components
Live preview of component changes
Static analysis of components using gulp tasks
Typescript support
Ability to pass children to BlueKit
Automatic hiding of props that don't affect component's look
Option to reset localStorage if BlueKit doesn't load properly

Npm script:

Setup the build of BlueKit on application start by adding the following task to your default script:

build-bluekit

Watch components for changes by editing the default script to:

watch-bluekit

Add BlueKit to the build process, for example on stage or production:

It will be built when needed.

Add BlueKit to your project by adding the following line:

Look at the example directory, you only need to add:

Optionally, you can pass children to BlueKit, which will be displayed above the search field for themes or other purposes.
If you want to add JSDoc descriptions, refer to the example example_components/Checkbox.react.js.

Typescript support:

BlueKit automatically finds .tsx files and uses the react-docgen-typescript parser for it.

BlueKit development:

To start the development server and play with components in BlueKit, run the following command:

BlueKit development

Additional info:

BlueKit automatically hides props that don't affect the component's look.
If BlueKit doesn't load properly, try resetting localStorage by running localStorage.clear();

Summary:

React BlueKit is a valuable tool for React developers. It simplifies the process of generating a library from React components, allowing for easy browsing, prop editing, and live previews. The tool also provides features such as static analysis, Typescript support, and the ability to pass children to BlueKit. Overall, React BlueKit enhances development efficiency and improves the development experience.

Blueberryapps

Radium Bootstrap Grid

React Bluekit