https://github.com/raphamorim/reactsandbox
Create a React Component Sandboxes based on compositions
https://github.com/raphamorim/reactsandbox
documentation documentation-tool react-components reactjs sandbox storybook
Last synced: 12 months ago
JSON representation
Create a React Component Sandboxes based on compositions
- Host: GitHub
- URL: https://github.com/raphamorim/reactsandbox
- Owner: raphamorim
- License: other
- Created: 2017-12-12T22:41:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-26T21:57:46.000Z (over 8 years ago)
- Last Synced: 2024-05-02T21:11:28.850Z (about 2 years ago)
- Topics: documentation, documentation-tool, react-components, reactjs, sandbox, storybook
- Language: JavaScript
- Homepage: http://raphamorim.io/reactsandbox/
- Size: 666 KB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reactsandbox
[](https://circleci.com/gh/raphamorim/reactsandbox/tree/master)
> 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](https://github.com/raphamorim/reactsandbox/blob/master/styles/reactsandbox.css)).
- You can use with any Builder (Webpack, Rollup, Browserify, Parcel...). Because `reactsanbox` is only a HOC.
- Easy to add on existent component and fast update on documentation, it can be used with `PropTypes` or `Types`.
- Lightweight `~3.6K gzip`.
## Installing
```bash
yarn add reactsandbox
```
## Example
**Book.js**
```jsx
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}) =>
{renderCover}
{title}
{author}
{year}
// 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('
', 'Render ReactElement as Cover Book')
})
export default Book
export BookSandbox // export Component Sandbox either
```
[See Demo](http://raphamorim.io/reactsandbox/)
## Types
Note that `Type` is a custom object, then you can create your own.
### Custom Types
#### Boolean
Returns Type object from Boolean.
**default value**: `false`
```jsx
Types.Boolean(false, 'prop description')
```
#### String
Returns Type object from String.
**default value**: `''`
```jsx
Types.String('prop value', 'prop description')
```
#### Number
Returns Type object from Number.
**default value**: `0`
```jsx
Types.String(100, 'prop description')
```
#### ReactElement (not stable, experimental)
Returns Type object from ReactElement.
**default value**: `null`
```jsx
Types.ReactElement('
', 'prop description')
```