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

props	type	description
height	Number	Total height of the container. By default it will be the sum of all line's heights.
style	Object	Any custom css styling

Placeholder.Line

props	type	description
height	Number	Define the height in px of the line to be draw
intervals	Array[Array]	List of intervals to be drawn in the line, from a start to an end point in percentage %. If nothing is provided, an empty line will be drawn. For example, [[0, 10], [15, 20]] will draw a lime from 0 to 10% of the container width and from 15 to 20%, respectively.
style	Object	Any custom css styling

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