react-component-placeholder

v1.0.1

Published

4 years ago

A toolbox to create highly customisable responsive component placeholders.

0High
0Medium
0Low

wietsedevries

react react-placeholder loading-component placeholder loading

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

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} />

| Property | Description | Type | Default value | | ------------ | ------------- | ------------- | ------------- | | animation | Loading animation | ['wave', 'pulse'] | none | | borderRadius | Border-radius for all children | number | 0 | | color | Main color for all children | number | 0 | | viewport | Breakpoints for the grid components | object | { xs: 360, sm: 768, md: 1024, lg: 1280 } | | columns | Number of rows in the grid | number | 12 | | gutter | Pixels between rows | number | 30 |

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} />

| Property | Description | Type | Default value | | ------------ | ------------- | ------------- | ------------- | | height | Fixed height | number | none | | padding | Component padding | number | 0 | | borderRadius | Border radius for block | number | config || 0 | | backgroundColor | Background color for block | string | #FFF | | boxShadow | Box shadow for block. If true default will apply, else the provided value | [string, boolean] | '0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16)' || none | | border | Border for block. If true default will apply, else the provided value as width | [string, boolean] | '1px solid config.color' || none | | style | Style prop to customise your block | object | none |

Circle

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

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

| Property | Description | Type | Default value | | ------------ | ------------- | ------------- | ------------- | | backgroundColor | Background color | string | config.color | | backgroundImage | Background image | string | none |

Square

Simple square component as a placeholder for images.

<Square backgroundColor="#336699" />

Text

A text placeholder for, well... text.

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

| Property | Description | Type | Default value | | ------------ | ------------- | ------------- | ------------- | | rows | Number of rows | number | 1 | | width | Fixed width in px. Only applicable for 1 row | numer | none | | color | Color of text | string | config.color | | fontSize | Font size in pixels | number | 16 | | borderRadius | Border radius of text line | number | (fontSize / 2) || 0 |

Line

A simple horizontal line to use as a divider.

<Line width={2} />

| Property | Description | Type | Default value | | ------------ | ------------- | ------------- | ------------- | | width | Line width | number | 1 | | color | Color of the line | string | config.color | | margin | Top- and bottom margin for line | number | 10 |

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} />

| Property | Description | Type | Default value | | ------------ | ------------- | ------------- | ------------- | | xs | Width for xs viewport | number | 12 | | sm | Width for sm viewport | number | 12 | | md | Width for md viewport | number | 12 | | lg | Width for lg viewport | number | 12 | | xl | Width for xl viewport | number | 12 | | xsOffset | Offset left for xs viewport | number | 0 | | smOffset | Offset left for sm viewport | number | 0 | | mdOffset | Offset left for md viewport | number | 0 | | lgOffset | Offset left for lg viewport | number | 0 | | xlOffset | Offset left for xl viewport | number | 0 |

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

| Date (dd-mm-yyy) | Description | Name | Version | | ------------ | ------------- | ------------- | ------------- | | 31-10-2018 | Initial release | Wietse de Vries | 1.0.0 |