demo-ui

A tiny UI library designed for build interactive demos for every react app.

Summary

• Why Demo-ui?
• Installation
• See in action
• Authors
• License

Why Demo-ui?

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-ui is 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-ui can 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.

Installation

The whole 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):

@bit:registry= https://node.bit.dev

Now Bit registry is accessible from npm:

• Box npm i @bit/cianciarusocataldo.demo-ui.box

• Previewer npm i @bit/cianciarusocataldo.demo-ui.previewer

• Demo npm i @bit/cianciarusocataldo.demo-ui.demo

• Prop creators npm i @bit/cianciarusocataldo.demo-ui.prop-creators

• Logic npm i @bit/cianciarusocataldo.demo-ui.logic

• Types 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

Authors

• Cataldo Cianciaruso - Initial work - CianciarusoCataldo

License

This project is licensed under the MIT License - see the LICENSE file for details