reactsandbox
Create a React Component Sandbox based on compositions
Integrate Live documentation on real-world React components.
Reasons to use reactsandbox:
-
Fully Hackable (you can change everthing or create your own style, see available CSS classes).
-
You can use with any Builder (Webpack, Rollup, Browserify, Parcel...). Because
reactsanboxis only a HOC. -
Easy to add on existent component and fast update on documentation, it can be used with
PropTypesorTypes. -
Lightweight
~3.6K gzip.
Installing
yarn add reactsandboxExample
Book.js
import React from 'react'
import withSandbox, { Types } from 'reactsandbox'
// you can import styles or create your own
import 'reactsandbox/styles/default-theme.css'
const Book = ({title, author, year, transparent, renderCover}) =>
<div className={`book ${(transparent)? 'transparent' : ''}`}>
<div className='cover'>{renderCover}</div>
<div className='info'>
<div className='title'>{title}</div>
<div className='author'>{author}</div>
<div className='year'>{year}</div>
</div>
</div>
// Compose Sandbox for Book Component
const BookSandbox = withSandbox(Book, {
transparent: Types.Boolean(false, 'Set Book Card as Transparent'),
title: Types.String('My Book Name', 'Description of Title'),
author: Types.String('John Doe', 'Description of Author'),
year: Types.Number(1995, 'Year of Publication'),
renderCover: Types.ReactElement('<img src="book-cover.jpg"/>', 'Render ReactElement as Cover Book')
})
export default Book
export BookSandbox // export Component Sandbox eitherTypes
Note that Type is a custom object, then you can create your own.
Custom Types
Boolean
Returns Type object from Boolean.
default value: false
Types.Boolean(false, 'prop description')String
Returns Type object from String.
default value: ''
Types.String('prop value', 'prop description')Number
Returns Type object from Number.
default value: 0
Types.String(100, 'prop description')ReactElement (not stable, experimental)
Returns Type object from ReactElement.
default value: null
Types.ReactElement('<img src="source-to-my-image.png"/>', 'prop description')