react-component-placeholder v1.0.1

React component placeholder

A lightweight toolbox to create highly customisable responsive component placeholders.

It's easy to use and very flexible. Feel free to use these components in combination with your own custom components or components from other libraries. No restrictions.

Index

1. Setup
2. Components
   • Placeholder
   • Block
   • Circle
   • Square
   • Text
   • Line
3. Grid
   • Row
   • Col
4. Contribute
5. Change log
6. License

Setup

Install react-component-placeholder as a dependency for your react.js project.

npm install react-component-placeholder --save

Components

This library consist of a few simple react components you can use to compose your own placeholders.

Example

import React from 'react';
import { Placeholder, Circle, Text, Row, Col } from 'react-component-placeholder';

export const customPlaceholderComponent = () => {
  const config = {
    borderRadius: 3,
    color: '#F9F9F9',
    // etc.
  }

  return (
    <Placeholder config={config}>
      <Row>
        <Col xs={4} md={3}>
          <Circle />
        </Col>
        <Col xs={4} md={3}>
          <Text />
        </Col>
      </Row>
    </Placeholder>
  )
}

Placeholder

The Placeholder component is a provider component to provide nested components with context. You can pass a single config prop to the Placeholder component.

const config = {
  animation: 'pulse',
  borderRadius: 5,
  color: '#CCC',
  fontSize: 16,
}

<Placeholder config={config} />

Block

The block component is a simple container you can use to style your placeholder component. All props are optional, but if you don't use them, you might as wel not use the Block component. All props overwrite the config.

<Block borderRadius={2} boxShadow={true} />

Circle

Simple circle component as a placeholder for round images/buttons.

<Circle backgroundImage="../assets/images/dummy-avatar.png" />

Square

Simple square component as a placeholder for images.

<Square backgroundColor="#336699" />

Text

A text placeholder for, well... text.

<Text rows={3} fontSize={11} />

Line

A simple horizontal line to use as a divider.

<Line width={2} />

Grid

This library contains simple grid component, but you're free to use whatever grid components you're comfortable with.

Row

A horizontal row to contain <Col /> components

<Row />

:grey_exclamation: This component does not accept any props.

Col

A column to use inside a <Row />. The width of each column is a percentage determined by the number of horizontal columns defined in the config. (width = (100 / config.columns) * value). The same goes for offset.

<Col xs={12} sm={6} smOffset={3} md={4} lg={3} xl={2} />

Contribute

Feel free to submit a PR! I'm sure there's room for lots of improvements, but you can start with;

• New loading animations
• Extended customisation options for components
• Whatever you want...

When submitting a PR, please add the correct prop-types, respect the eslint rules and update the change log.

Change log

License

Licensed under the MIT License, Copyright © 2018-present