DemoZap ⚡

[![npm version][npm-badge]][npm-url]
[![CI][build-badge]][build-url]
[![semantic-release][semantic-badge]][semantic-url]
[![TypeScript][typescript-badge]][typescript-url]

_Create demo components in a zap_

Maintaining example code and demo separately makes it painful, it's easy to get them out of sync 🙅

Code can't lie, documentation can 💥

DemoZap CLI keeps your code up to date with demo 💪


Usage

- Name component files as [component_name].demozap.jsx
- Run npx demozap generate

Use created demos 🎉

Demo 💥

Install

``bash


React

npm install -D react-demo-tab

Svelte

npm install -D svelte-demo-tab

Vue

npm install -D vue-demo-tab
`

Generated Demos

- Generated demo files are prefixed with _:
MyComponent.demozap.jsx → _MyComponent.jsx
- or set custom prefix:
npx demozap generate --prefix=CustomPrefix`

Built with DemoZap

- React Tilt - DemoZap
- Mighty Mouse - DemoZap
- Magnetic Board - DemoZap

Manually create demos

To manually create demos use DemoTab component.

Contributing

All contributions are welcome!

[npm-url]: https://www.npmjs.com/package/demozap
[npm-badge]: https://img.shields.io/npm/v/demozap.svg
[build-badge]: https://github.com/demozap/demozap/actions/workflows/main.yml/badge.svg
[build-url]: https://github.com/demozap/demozap/actions/workflows/main.yml
[semantic-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-url]: https://github.com/semantic-release/semantic-release
[typescript-badge]: https://badges.frapsoft.com/typescript/code/typescript.svg?v=101
[typescript-url]: https://github.com/microsoft/TypeScript