React DemoTab
📑
A React component to easily create demos of other components
Install
npm install react-demo-tab
Demo
Example
import React from 'react';
import ReactDOM from 'react-dom';
import DemoTab from 'react-demo-tab';
import DemoComponent from './ButtonGreen';
const demoCode = `
import React from 'react';
import './ButtonGreen.css';
const ButtonGreen = () => <button className="btn-green">Green Button</button>;
export default ButtonGreen;`;
const demoStyle = `
.btn-green {
background-color: green;
font-size: 14px;
padding: 12px 26px;
border-radius: 6px;
}`;
const App = () => {
return (
<DemoTab code={demoCode} style={demoStyle}>
<DemoComponent />
</DemoTab>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Props
Create demo of component that is passed as a child.
Below is the complete list of possible props and their options:
▶︎ indicates optional prop with default value
code: string
Demo code. Required.
style: string ▶︎ undefined
Demo style.
codeExt: 'jsx' | 'tsx' ▶︎ jsx
Code file extension for image to be displayed.
styleExt: 'css' | 'scss' ▶︎ css
Style file extension for image to be displayed.
Create demos with CLI tool
Instead of manually creating demos, automate the process with DemoTab CLI tool.
Development
Easily set up a local development environment!
Build all the examples and starts storybook server on localhost:9009:
- clone
npm installnpm start
OR
Clone this repo on your machine, navigate to its location in the terminal and run:
npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes
Clone project repo that you wish to test with react-demo-tab library and run:
npm install
npm link react-demo-tab # link your local copy into this project's node_modules
npm start
Start coding!
Built with DemoTab
Contributing
All contributions are welcome!
2.7k Jan 9, 2023
8k Jan 1, 2023
4 Mar 8, 2022
2 Feb 10, 2022
1 Dec 30, 2021
3 Dec 10, 2022
0 Mar 14, 2022
144 Jan 6, 2023
6 Sep 6, 2022
3 Aug 27, 2021
21 Sep 6, 2022
21 Dec 30, 2022
114 Jan 3, 2023
1 Oct 28, 2021
2 Jan 23, 2022
5 Sep 15, 2022
6.6k Dec 31, 2022
3.6k Dec 30, 2022
56 Nov 15, 2022