React Component Viewer
In my day-to-day, I work across multiple React apps that don’t necessarily share components. They have different build systems and different technology stacks.
I wanted to find a simple tool/workflow that:
- lets me observe component states all at once or zoom into a single component or a screen for debugging,
- can be integrated into existing projects without tweaking a build system or having a separate build system,
- have a notion of theme switching, but is agnostic to a theme stack.
After trying tools like StoryBook and Styleguidist I decided to take a different approach and build a React component to address my needs.
import { ComponentViewer } from ‘react-component-viewer’;
Note: this project is work-in-progress and this article is an attempt to get early constructive feedback.
Overview
<ComponentViewer/> is a regular React component that gives you a way to navigate across your registered components and view/interact with them in various ways.
To leverage your existing build setup you can use it in place of your usual entry point, but make sure you only use it during development process.
In order to use it you need to specify what components you want to work on and how will they be displayed.
There are three levels of navigation: registries, demos, and demo entries.
It will render something like:
There are three registries: components, layouts, and screens. Within the selected components registry, there are Links, Buttons, and Inputs demos. And finally, within the selected Buttons demo you can see two entries: primary and secondary.
Example
Demo Functions
Demo function is a regular function that associates an instance of a component with its name:
Layout Options
When you register demo functions, you need to pick a layout option. The Buttons demo in the provided example is registered using a TwoColumnsTable layout:
Theme Switching
You can set up a drop down and a handler to switch between themes. Additionally, hot keys can be assigned to each theme for easy switching.
Components Wrapper
When you create a Registries instance, a component wrapper can be passed via config. This will apply the wrapper to every registry.
Additionally, a registry-specific config can be specified.
State simulation
You can use simulateStatefor simple state simulation. simulateState returns two functions: one for getting value and one for setting value.
Do not confuse this with Hooks. SimulateState’s main goal is to move setState out of the demo functions to make the example snippets less cluttered for documentation purposes.
Action notifications
Use simpleAction("label") to create a simple handler for actions. Calling this function will make a small balloon appear in the corner so you can visually validate that wiring is working.
Future Vision for Component Documentation
React ComponentViewer’s focus is on component development, but it is being developed with documentation in mind.
There are systems like Gatsby or React Static that let you build a static react-based website.
My plan is to provide a documentation-friendly component that can be injected into a component documentation site.
<ComponentDemo demo={buttonsDemo} layout={MyCustomDocLayout}/>And then extract example snippets from demo functions by using standard parsers. Maybe even provide a GraphQL extension to Gatsby.
Inspirations
Projects that inspired ReactComponentViewer:
- StoryBook — UI development environment.
- Styleguidist — component development environment with a living style guide
- Gatsby build blazing (fast|modern|beautiful|secure) apps and websites with React
- React Static A progressive static site generator for React.
Please share your feedback below and/or send issues/follow GitHub Repo if you are interested in trying it out.
