@lightspeed/cirrus-bone
v4.0.0-beta.1
Published
Cirrus Bone Component
Downloads
216
Keywords
Readme
Bone
Used to build the skeleton preview of a component while loading data.
Installation
- 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
- Install the component library
yarn add @lightspeed/cirrus-bone
- 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>
);
}
}
- 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;