React Bluekit
Automatically generating a component library from your React components (ES5, ES6, Typescript)
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.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Gulp
Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.