React Bluekit

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

Installation:

To use BlueKit, you can either use npm script or gulp.

Npm script:

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

build-bluekit

2. Watch components for changes by editing the default script to:

watch-bluekit

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

It will be built when needed.

4. Add BlueKit to your project by adding the following line:

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

5. Optionally, you can pass children to BlueKit, which will be displayed above the search field for themes or other purposes.

6. 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.