@malomohq/suede-elevation/README.md

Material Design elevation for any React component

# `@malomohq/suede-elevation`

**[Demo - Shadow](https://codesandbox.io/embed/4080ono8j4)**

## Getting Started
```
npm install @malomohq/suede-elevation

# or

yarn install @malomohq/suede-elevation
```

## Usage

### `Shadow`

The `Shadow` component will apply a drop shadow to any React component. You can
modify the effect of the shadow using the `distance` prop.

```js
import { Shadow } from '@malomohq/suede-elevation';

function Example() {
  return (
    <Shadow distance={ 1 }>
      <div>Hello, world!</div>
    </Shadow>
  );
}
```

**Details**

* Element type - none
* Component type - Comprehensive
* Allows root override - No

**Props**

* `children` (element | required) - A single React element of any type.
* `distance` (number | required) - The distance from the front of one material to
the front of the next measured on the z-axis. May be a value between 0 and 24.

***

### `Scrim`

The `Scrim` component applies an opaque background to it's relative parent.

```js
import { Scrim } from '@malomohq/suede-elevation';

function Example() {
  return (
    <div>
      <Dialog>Hello, world!</Dialog>
      <Scrim show />
    </div>
  );
}
```

**Details**

* Element type - `div`
* Component type - Structural
* Allows root override - Yes

**Props**

* `show` (boolean) - Whether to display the scrim or not.

**Additional Notes**

The `z-index` for this component is set to a value of `1000`. If you would like to place an element above or below the scrim you will need to apply a `z-index` to that element accordingly.

## See Also

* [Suede Button](https://github.com/malomohq/suede-button)

## Further Reading

* [Material Design - Elevation](https://material.io/design/environment/elevation.html)