react-demo-tab alternatives and similar libraries
Based on the "Miscellaneous" category.
Alternatively, view react-demo-tab alternatives based on common mentions on social networks and blogs.
-
react-pdf
Display PDFs in your React app as easily as if they were images. -
typography
A powerful toolkit for building websites with beautiful design -
react-resizable-and-movable
๐ฑ A resizable and draggable component for React. -
react-simple-chatbot
:speech_balloon: Easy way to create conversation chats -
react-awesome-query-builder
User-friendly query builder for React -
react-resizable-box
๐ A resizable component for React. -
react-pdf-viewer
A React component to view a PDF document -
react-json-tree
React JSON Viewer Component, Extracted from redux-devtools. -
react-facebook
Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post -
react-avatar
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. -
react-blur
React component to blur image backgrounds using canvas. -
chessboardjsx
:black_square_button: Chessboard built for React -
react-svg-buttons
React configurable animated svg buttons -
react-images-uploader
React.js component for uploading images to the server -
react-darkreader
๐ A React Hook for adding a dark / night mode to your site. -
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading. -
react-apple-signin-auth
๏ฃฟ Apple signin for React using the official Apple JS SDK -
react-swipeable-list
Swipeable list component for React supporting several behaviours (e.g. iOS) -
react-tabguard
Limit tabbing within specified area with an ease -
material-color-hash
Hash strings to Material UI colors -
react-swipe-to-delete-ios
A simple React component to reproduce the way iOS deletes an item in a list -
react-avatar-generator
Generate fun kaleidoscope for user avatars. -
react-filter-control
The react UI component for building complex filter criteria -
react-headings
โ Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO. -
@restpace/schema-form
A React component package for generating forms based on (almost) the full power of JSON Schema -
react-advanced-news-ticker
A powerful, flexible, lightweight and animated vertical news ticker component for React. -
react-searchbox-awesome
The coolest searchbox for React.js! -
react-mouse-select
A simple react library for selecting elements by moving the mouse -
react-customizable-chat-bot
Customizable chat bot library using React and Typescript -
react-pulse-text
React component that allows you to animate the text you want -
react-color-scroll
Blend through colors as you scroll down the page. -
react-cloud-letter
Wrap your letter in lovely cloud-like shape with React. -
react-pagespeed-score
A React component for display a dial-type chart of PageSpeed Insights.
A Non-Cloud Alternative to Google Forms that has it all.
Do you think we are missing an alternative of react-demo-tab or a related project?
README
React DemoTab ๐
A React component to easily create demos of other components
Install
npm install react-demo-tab
Demo
Example
[](demo-tab.gif)
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 install
npm 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!