//
)
const WithHook = () => {
const ref = React.useRef(null)
const a11yProps = useA11yButton(ref, (event) => {
// This is your `onClick` handler
console.log('Clicked', event)
})
return
}
```
## API
### <Button>
#### Props
| Prop | Type | Default | Required? | Description |
| -------- | -------------------- | ----------- | --------- | ---------------------------------------------------------------------------------------------------- |
| children | `React.ReactElement` | `undefined` | Yes | The component you want to turn into a button that handles focus and `space`, `enter` keydown events. |
### useA11yButton(target, onClick)
A React hook for adding a11y properties and button/role=button interop to elements.
```jsx harmony
const Button = () => {
const ref = React.useRef(null)
const a11yProps = useA11yButton(ref, (event) => {
// This is your `onClick` handler
console.log('Clicked', event)
})
return
}
```
#### Arguments
| Argument | Type | Required? | Description |
| -------- | ---------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------- |
| target |
React.RefObject<T> | T | null | Yes | A React ref or HTML element | |
| children | `React.ReactElement` | Yes | The component you want to turn into a button that handles focus and `space`, `enter` keydown events. |
#### Returns
```ts
{
readonly role: "button";
readonly tabIndex: 0;
}
```
## LICENSE
MIT
---
_Source: https://npm.io/package/@accessible/button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
