Chuck Norris faking components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
dist
.babelrc
.gitignore
LICENSE
Readme.md
_config.yml
bundle.js
index.html
package.json
webpack.config.js

Readme.md

#react-fake-component

Bored from loading indicators? You can fake it.

This component highly inspired from Kenan Yusuf's -Fake it'til you Make it- blog.

🦄 Working Demo & Examples

react-fake-component

###Usage

Install

npm i --save react-fake-component 

add https://github.com/OGPoyraz/react-fake-component/blob/master/dist/style.css into your styles.

// Import
import FakeComponent from 'react-fake-component';

// & Render
<FakeComponent fake={{
    type: 'c',
    header: true,
    line: 3,
    repeat:5,
    className: 'customClass',
    styleForComponent: {
        padding: '20px',
        border:'5px solid #aac8ff'
    },
    styleForDivider:{
        height:'1px',
        marginTop:'10px',
        marginBottom:'10px',
        backgroundColor:'#ddd'
    },
    styleForLine: {
        backgroundColor: '#aac8ff',
        marginBottom: '8px',
        height: '8px'
    },
    styleForHeader: {
        backgroundColor: '#aac8ff',
        marginBottom: '15px',
        height: '20px'
    },
    styleForAvatar: {
        backgroundColor: '#aac8ff',
        width: '100px',
        height: '100px'
    }
}}/>

Changelog

1.1.1
  • repeat property added. #1
  • Divider && styleForDivider added. #2

###Development

Clone repo & navigate into it

npm i
npm run development

& browse http://localhost:3000

Thanks for reading.