Reactive Forge is a metadata generator for react components. It generates files exposing list of components with descriptions of their arguments. Can be used to create component library preview or ui designer with components imported from code.
- Extraction of component metadata
- Rendering the component from metadata and argument values with typechecking
- Easily creating preview of your component with option to edit arguments from the ui
First, install @reactive-forge/codegen package:
npm install -D @reactive-forge/codegenor
yarn add --dev @reactive-forge/codegenThen run npx forge init and follow instructions in the command line.
Last, but not least, add forge && at the beginning of your dev and build scripts.
And with that, you're good to go!
List of Reactive Forge packages with links to their documentations:
Since Reactive Forge handles schema validation and values creation, some restrictions were placed on component argument types. See the table below:
| Type | Supported | Remarks |
|---|---|---|
| undefined | ✔ | |
| null | ✔ | |
| boolean | ✔ | boolean literals are also supported |
| number | ✔ | number literals are also supported |
| string | ✔ | string literals are also supported |
| Date | ✔ | |
| unknown | ❌ | may be added in the future |
| any | ❌ | may be added in the future |
| never | ❌ | may be added in the future |
| array | ✔ | |
| tuple | ❌ | will be supported in the future |
| object | ✔* | optional properties with unsupported types will be dropped, see below for implications |
| function | ❌* | will be partially supported in the future |
| union | ✔ | |
| intersection | ✔* | you can have intersections in your type, they will be evaluated and stripped before schema generation |
| cyclic | ❌ | schema format does not support references |
| ReactNode | ✔ |
Due to the fact, that optional object properties that have unsupported type are dropped before intersections are calculated, it is possible that intersection of object types will be incorrectly calculated - resulting type will be broader than it should be.
- Rendering custom components defined in json format
- Compiling custom components defined in json format into tsx and jsx
- Tuples support
- Partial support for functions
- Recognizing and better rendering for discriminated unions