import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { PercentFormatter } from './percent-formatter.component';

<Meta
  title="Components/Typography/PercentFormatter"
  component={PercentFormatter}
/>

# PercentFormatter

The percent formatting component uses React International `<FormattedNumber />` under the hood. Passing in a value such as `0.45` will return `45.0%`

It has some defaults in place but these can be overridden. For example, if you want 0 decimal places, you can do:

```jsx
<PercentFormatter
  value={0.456}
  minimumFractionDigits={0}
  maximumFractionDigits={0}
/>
```

Please see the [React International docs](https://formatjs.io/guides/message-syntax/#number-type) for details.

## Normal

<Canvas>
  <Story id="components-typography-percentformatter--normal" />
</Canvas>

## Round To Whole

<Canvas>
  <Story id="components-typography-percentformatter--round-to-whole" />
</Canvas>