Negligible Psychological Misery

    react-component-placeholder

    1.0.1 • Public • Published

    React component placeholder

    A lightweight toolbox to create highly customisable responsive component placeholders.

    img

    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
    3. Grid
    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} />
    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" />
    Property Description Type Default value
    backgroundColor Background color string config.color
    backgroundImage Background image string none
    borderRadius Border radius for square component number config.borderRadius

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

    ❕ 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

    License

    Licensed under the MIT License, Copyright © 2018-present

    Install

    npm i react-component-placeholder

    DownloadsWeekly Downloads

    6

    Version

    1.0.1

    License

    none

    Unpacked Size

    93.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • wietsedevries