A tiny UI library designed for build interactive demos for every react app.
demo-ui provide a flexible and responsive playground to test any component. It can be used to have a real-time preview while playing with the component's properties, without touching the code.
Use demo-ui with react-styleguidist
When developing React apps, expecially in teams, a common (and safer) approach is to test every component separately, into an isolated environment, before introducing it into the app, to prevent unexpected behaviours and undesired errors. This job is usually done by various utilities, like react-styleguidist. When using a Styleguide, for example, for every component is usually provided a demo (or example) file (or multiple files).
demo-ui can be used to stadardize the demos's design and to have them all wrapped into a dedicated and isolated playground, fully customizable. This brings some advantages:
Less code, less time wasted: wrapping a component with
demo-uiis really quick and intuitive to do when writing demo files (for Styleguidist,
.md), and gives to other devs the ability to experiment with the component, without the need to write additional static examples (or implements selectors, input fields and so on).
demo-uican do the job for you. As a side-effect, this can speed up the Styleguide rendering process (less DOM nodes).
Standard UI for every demo: when working in team on a single project, every dev usually write demo files in a preferred way (implementing selectors, importing external components to give a realistic scenario, and so on). This usually make the global Styleguide's UI not homogeneous.
demo-ui library can be installed from official npm registry:
npm i @cianciarusocataldo/demo-ui
Installation's steps can be different, depends on which package manager is used.
It's possible to download every
demo-ui component separately, with Bit package registry. Before next step, add the following entry to your
.npmrc file, that must be located to the host project root (look at the official Bit docs for details):
Now Bit registry is accessible from
npm i @bit/cianciarusocataldo.demo-ui.box
npm i @bit/cianciarusocataldo.demo-ui.previewer
npm i @bit/cianciarusocataldo.demo-ui.demo
npm i @bit/cianciarusocataldo.demo-ui.prop-creators
npm i @bit/cianciarusocataldo.demo-ui.logic
npm i @bit/cianciarusocataldo.demo-ui.types
demo-ui component collection can be found on https://bit.dev/cianciarusocataldo/demo-ui
See in action
Wanna see how this library works in real time? A static version of the integrated playground can be found on https://cianciarusocataldo.github.io/demo-ui
- Cataldo Cianciaruso - Initial work - CianciarusoCataldo
This project is licensed under the MIT License - see the LICENSE file for details