https://github.com/airtoxin/react-showcase

Make it easy to create your own react component showcase site.
https://github.com/airtoxin/react-showcase

Last synced: about 9 hours ago
JSON representation

Make it easy to create your own react component showcase site.

• Host: GitHub
• URL: https://github.com/airtoxin/react-showcase
• Owner: airtoxin
• License: mit
• Created: 2016-07-30T10:26:36.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-25T08:11:57.000Z (almost 2 years ago)
• Last Synced: 2024-10-27T20:01:07.709Z (10 days ago)
• Language: JavaScript
• Homepage:
• Size: 613 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-showcase [![Build Status](https://travis-ci.org/airtoxin/react-showcase.svg?branch=master)](https://travis-ci.org/airtoxin/react-showcase)

Make it easy to create your own react component showcase site.

## Install

`$ npm install --save react-showcase`

## Usage

```js

import showcase from 'react-showcase';

const myComponents = [Input, Button];

const showcases = myComponents.map(Component => {

  const Showcase = showcase(Component);

  reutrn 

});

function App() {

  return 
{showcases}

}


ReactDOM.render(, document.getElementById('showcase'));

```

It shows...

![showcaseView.png](showcaseView.png)

## Api

### `showcase(Component)` function (default exported)

__return__: `Showcase` component

This function returns your `Component` wrapped by `Showcase` component.

### `defaultStyles` object (named exported)

If you want to override showcase component styles, this can be used for base styling.

### `Showcase` component

``

It has styles property to override showcase styles.

```js

import { defaultStyles } from "react-showcase";

const myStyles = Object.assign({}, defaultStyles, {

  article: { border: "dashed 2px red" }

});

const Wrapped = showcase(MyComponent);

ReactDOM.render(

  ,

  document.getElementById("showcase")

);

```

![](styledShowcase.png)

## License

MIT