react-placeholder-canvas v1.0.3

react-placeholder-canvas

A component that provides a canvas to create your loading placeholders no matter the shape.

• Usage
• API
  • Placeholder.Wrapper
  • Placeholder.Line
• Contributing
• License

Usage

First, install the react-placeholder-canvas module:

npm install react-placeholder-canvas --save

or install with yarn

yarn add react-placeholder-canvas

API

• lines (Array): an array of objects containing the lines to be drawn
  • height (Number): height of the line
  • intervals (Array): intervals that will be drawn in the line
• height (Object) optional: sets a max-height to the placeholder wrapper.

import Placeholder from 'react-pladeholder-canvas';

function PostPlaceholder() {
  return (
    <Placeholder.Wrapper>
      <Placeholder.Line height={10} intervals={[[0, 5], [7, 50]]} />
      <Placeholder.Line height={10} intervals={[[0, 5]]} />
      <Placeholder.Line height={10} intervals={[[0, 5], [7, 48]]} />
      <Placeholder.Line height={10} intervals={[[0, 5]]} />
      <Placeholder.Line height={10} intervals={[[0, 5], [7, 47]]} />
      <Placeholder.Line height={10} />
      <Placeholder.Line height={10} intervals={[[7, 48]]} />
    </Placeholder.Wrapper>
  )
}

Result:

Placeholder.Wrapper

Placeholder.Line

Contributing

1. Fork it
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

License

This project is licensed under the MIT License