@lightspeed/cirrus-bone

    4.0.0-beta.1 • Public • Published

    Bone

    Used to build the skeleton preview of a component while loading data.

    Installation

    1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project
    yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
    1. Install the component library
    yarn add @lightspeed/cirrus-bone
    1. Hook the <ThemeProvider> and the theme in your app.
    // 1. Import the theme provider from emotion-theming
    //    This is needed to forward all our tokens to the components
    import { ThemeProvider } from 'emotion-theming';
     
    // 2. Import the base theme from cirrus-tokens
    //    There's nothing magical about this file. it's literally
    //    a plain old javascript object with keys and values that
    //    map to the tokens/design-system
    import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';
     
    /* Within your root app component */
    class App extends React.Component {
      render() {
        return (
          {/*
            3. Wrap the children with ThemeProvider and pass in
            the cirrus theme into the theme prop.
          */}
          <ThemeProvider theme={cirrusTheme}>
            {/* Whatever children */ }
          </ThemeProvider>
        );
      }
    }
    1. Import Bone and use right away!

    React Component

    Props

    Prop Type Description
    width string custom CSS width
    height string custom CSS height
    animated boolean whether the bone is animated (default: true)
    bg string Override the base background color of the bone

    Example

    import React from 'react';
    import Bone from '@lightspeed/cirrus-bone';
     
    const MyComponent = () => (
      <div>
        <Bone width="1rem" height="1rem" />
      </div>
    );
     
    export default MyComponent;

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-bone

    DownloadsWeekly Downloads

    48

    Version

    4.0.0-beta.1

    License

    MIT

    Unpacked Size

    14.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • kurt.bergeron
    • tombertrand
    • lightspeedhq
    • ls-guillaume-lambert
    • inooid
    • ls-frederic-bouchard
    • x.drdak
    • anomen
    • xena