import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Divider from '../Divider';

<Meta title="Components/Divider" component={Divider} />

# Divider API

The API documentation of the Divider React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Divider } from '@useblu/ocean-react';
```

## Usage

<Canvas withSource="open" withToolbar>
  <Story name="usage">
    <Divider style={{ width: 300 }} />
  </Story>
</Canvas>

## Props

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (native element).

## CSS

| Global class | Description                       |
| ------------ | --------------------------------- |
| .ods-divider | Styles applied to the hr element. |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Divider/Divider.tsx) for more detail.
