VCNKit/Sheet

@vcnkit/sheet provides a component that represents Material's paper.

Installation

NPM

$ npm install --save @vcnkit/sheet

Yarn

$ yarn add @vcnkit/sheet

Usage

The sheet component supports the elevation levels mentioned in Material Guidelines: Elevation & Shadows. It also supports an elevation of 0 which will render no shadow.

You can provide any elevation number, the component will display the shadow of the nearest supported value.

import Sheet from '@vcnkit/sheet';

const SomeComponent = () => (
    <Sheet elevation={ 2 }>
        This will have a shadow.
    </Sheet>
)

const SomeOtherComponent = () => (
    <Sheet elevation={ 25 }>
        This will render a Sheet with the shadow level of elevation 24 because 25 is not supported.
    </Sheet>
);

If you change the elevation of the <Sheet> component while it is mounted, the transition will be animated.

Using custom styles

To add extra style rules to the <Sheet> component, you can either attach a style prop or extend it:

import Sheet from '@vcnkit/sheet';

const CustomSheet = Sheet.extend`
    background-color: red;
`;

For more information, see Styled Components: Extending Styles

Generating shadows without using <Sheet>

If you only want to use the box-shadow value that corresponds with specified elevation level, you can use the createShadow utility function.

import { createShadow } from '@vcnkit/sheet';

const SomeComponent = () => (
    <div 
        style={ { boxShadow: createShadow(2) } }
    >
        This will have shadow that corresponds with elevation 2.
    </div>
)