{/* All your components containing any Canvas components */}
;
```
This will result in these data attributes being added to the body element (by default)
```html
```
Now in any component within this wrapper, you can use these data attributes to customize the focus
handling.
**React/Emotion:**
```js
[`[data-whatinput='mouse'] &:focus,
[data-whatinput='touch'] &:focus,
[data-whatinput='pointer'] &:focus`]: {
outline: 'none',
border: 'none',
},
```
**SCSS:**
```scss
[data-whatinput='mouse'],
[data-whatinput='touch'],
[data-whatinput='pointer'] {
.my-component:focus {
outline: none;
border: none;
}
}
```
We provide a [helper](../../common/react/lib/styles/hideMouseFocus.ts) to hide the focus outlines on
mouse input. Simply spread it in your styles (i.e. `...hideMouseFocus`).
**Note:** It is best practice to show focus outlines by default and specifically hide them in the
cases you would like (i.e. mouse/touch/pointer input).
**Note:** Multiple InputProviders in the same tree are not supported. Any nested `InputProvider`
will remove itself from the DOM (rendering only its children) and not attach any event listeners.
### Static Properties
#### `InputTypes`
| Theme |
| ---------- |
| `Keyboard` |
| `Mouse` |
| `Pointer` |
| `Touch` |
---
### Component Props
#### Required
> None
#### Optional
##### `provideIntent: boolean`
> Whether you would like the attribute `data-whatintent` rendered (see definition of intent above).
> Note: detecting intent will add scroll and mouse positioning listeners which could affect
> performance.
##### `container: HTMLElement | React.RefObject`
> The containing element in which the InputProvider attaches its data attributes. This property
> should be set to an element that is an ancestor of all your Canvas components.
Default: `document.body`
### Storybook Decorator
We provide a [storybook decorator](../../utils/storybook/CanvasProviderDecorator.tsx) to wrap your
stories in an `InputProvider` automatically.
Add this decorator to your `/.storybook/preview.js` configuration file to apply to all stories:
```js
import {InputProviderDecorator} from '../utils/storybook';
export const decorators = [InputProviderDecorator];
```
Or, add it to stories individually:
```js
import {InputProviderDecorator} from '../../../../utils/storybook';
export default {
title: 'MyComponent',
component: MyComponent,
decorators: [InputProviderDecorator],
};
// OR
MyStory.decorators = [InputProviderDecorator];
```
---
_Source: https://npm.io/package/@workday/canvas-kit-react-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._