@accessible/drawer 中文文档教程

发布于 4年前 浏览 21 项目主页 更新于 3年前


<Drawer>

捆绑恐惧症 Types 代码覆盖率 构建状态 NPM 版本 麻省理工学院许可证

npm i @accessible/drawer

的可访问且通用的抽屉

Features

  • [x] Style-agnostic You can use this component with the styling library of your choice. It works with CSS-in-JS, SASS, plain CSS, plain style objects, anything!
  • [x] Portal-friendly The drawer target will render into React portals of your choice when configured to do so.
  • [x] a11y/aria-compliant This component works with screen readers out of the box and manages focus for you.

Quick Start

用于React

组件jsx和谐 从“反应”导入*作为反应 import * as Drawer from '@accessible/drawer'

const Component = () => ( <抽屉.抽屉> <抽屉.触发器>

<Drawer.Target>
  <div className='my-drawer'>
    <Drawer.CloseButton>
      <button>Close me</button>
    </Drawer.CloseButton>

    <div>I've been revealed!</div>
  </div>
</Drawer.Target>

## API

### Components

| Component                       | Description                                                                                                    |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| [`<Drawer>`](#drawer)           | This component creates the context for your drawer target and trigger and contains some configuration options. |
| [`<Target>`](#target)           | This component wraps any React element and turns it into a drawer target.                                      |
| [`<Trigger>`](#trigger)         | This component wraps any React element and turns it into a drawer trigger.                                     |
| [`<CloseButton>`](#closebutton) | This is a convenience component that wraps any React element and adds an onClick handler to close the drawer.  |  |

### Hooks

| Hook                                                        | Description                                                                                                                                                                  |
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`useDrawer()`](#usedrawer)                                 | This hook provides the value of the drawer's [DrawerContextValue object](#drawercontextvalue).                                                                               |
| [`useA11yTarget()`](#usea11ytargettarget-options)           | A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).  |
| [`useA11yTrigger()`](#usea11ytriggertarget-options)         | A React hook for creating a headless drawer trigger to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html). |
| [`useA11yCloseButton()`](#usea11yclosebuttontarget-options) | A React hook for creating a headless close button to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).   |

### &lt;Drawer&gt;

This component creates the context for your drawer target and trigger and contains some
configuration options.

#### Props

| Prop        | Type                      | Default     | Required? | Description                                                                                                                                               |
| ----------- | ------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen | `boolean`                 | `false`     | No        | This sets the default open state of the drawer. By default the drawer is closed.                                                                          |
| open        | `boolean`                 | `undefined` | No        | This creates a controlled drawer component where the open state of the drawer is controlled by this property.                                             |
| onChange    | `(open: boolean) => void` | `undefined` | No        | This callback is invoked any time the `open` state of the drawer changes.                                                                                 |
| id          | `string`                  | `undefined` | No        | By default this component creates a unique id for you, as it is required for certain aria attributes. Supplying an id here overrides the auto id feature. |
| children    | `React.ReactNode`         | `undefined` | No        | Your drawer contents and any other children.                                                                                                              |

### useA11yTarget(target, options?)

A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).

#### Arguments

| Argument | Type                                               | Required? | Description                 |
| -------- | -------------------------------------------------- | --------- | --------------------------- |
| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes       | A React ref or HTML element |
| options  | [`UseA11yTargetOptions`](#usea11ytargetoptions)    | No        | Configuration options       |

#### UseA11yTargetOptions

TS 导出接口 UseA11yTargetOptions { /**

  • Sets the placement of the drawer menu
  • @default "left" / placement?: 'top' | 'right' | 'bottom' | 'left' /*
  • Adds this class name to props when the drawer is open / openClass?: string /*
  • Adds this class name to props when the drawer is closed / closedClass?: string /*
  • Adds this style to props when the drawer is open / openStyle?: React.CSSProperties /*
  • Adds this style to props when the drawer is closed / closedStyle?: React.CSSProperties /*
  • Prevents the window from scrolling when the target is
  • focused after opening. / preventScroll?: boolean /*
  • When true, this closes the target element when the Escape
  • key is pressed.
  • @default true */ closeOnEscape?: boolean }
#### Returns

TS 输入 A11yProps = { 只读'aria-hidden':布尔值 只读 ID:字符串 | 不明确的 只读类名:字符串 | 不明确的 只读风格:{ 只读可见性:“隐藏” | '可见的' } & React.CSS 属性 } & { 只读风格: | ({ 只读可见性:“隐藏” | '可见的' } & React.CSS 属性 & { 只读位置:'固定' 只读顶部:0 只读权限:0 只读底部:'自动' 只读左:0 只读转换:'translate3d(0, -100%, 0)' }) | ({ 只读可见性:“隐藏” | '可见的' } & React.CSS 属性 & { 只读位置:'固定' 只读顶部:0 只读权限:0 只读底部:0 只读离开:'自动' 只读转换:'translate3d(100%, 0, 0)' }) | ({ 只读可见性:“隐藏” | '可见的' } & React.CSS 属性 & { 只读位置:'固定' 只读顶部:'自动' 只读权限:0 只读底部:0 只读左:0 只读变换:'translate3d(0, 100%, 0)' }) | ({ 只读可见性:“隐藏” | '可见的' } & React.CSS 属性 & { 只读位置:'固定' 只读顶部:0 只读权:'自动' 只读底部:0 只读左:0 只读变换:'translate3d(-100%, 0, 0)' }) }

#### Example

jsx 和谐 从“反应”导入*作为反应 导入 {useA11yTarget}

从 '@accessible/drawer' const MyTarget = () => { const ref = React.useRef(null) const a11yProps = useA11yTarget(ref, {preventScroll: true})

返回 (

I am the drawer content
) }

### &lt;Target&gt;

This component wraps any React element and turns it into a drawer target.

#### Props

| Prop          | Type                                     | Default     | Required? | Description                                                                                                                                                                                                     |
| ------------- | ---------------------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placement     | `"top" \| "right" \| "bottom" \| "left"` | `false`     | No        | When `true` this will render the drawer into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| portal        | `boolean \| string \| PortalizeProps`    | `false`     | No        | When `true` this will render the drawer into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| closeOnEscape | `boolean`                                | `true`      | No        | By default the drawer will close when the `Escape` key is pressed. You can turn this off by providing `false` here.                                                                                             |
| closedClass   | `string`                                 | `undefined` | No        | This class name will be applied to the child element when the drawer is `closed`.                                                                                                                               |
| openClass     | `string`                                 | `undefined` | No        | This class name will be applied to the child element when the drawer is `open`.                                                                                                                                 |
| closedStyle   | `React.CSSProperties`                    | `undefined` | No        | These styles will be applied to the child element when the drawer is `closed` in addition to the default styles that set the target's visibility.                                                               |
| openStyle     | `React.CSSProperties`                    | `undefined` | No        | These styles name will be applied to the child element when the drawer is `open` in addition to the default styles that set the target's visibility.                                                            |
| preventScroll | `boolean`                                | `false`     | No        | When `true` this will prevent your browser from scrolling the document to bring the newly-focused tab into view.                                                                                                |
| children      | `React.ReactElement`                     | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above.                                                                                      |

#### Example

jsx和谐 <目标>

Alert

//

### useA11yTrigger(target, options?)

A React hook for creating a headless drawer trigger to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
In addition to providing accessibility props to your component, this hook will add events
for interoperability between actual <button> elements and fake ones e.g. <a> and <div> to the
target element

#### Arguments

| Argument | Type                                               | Required? | Description                 |
| -------- | -------------------------------------------------- | --------- | --------------------------- |
| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes       | A React ref or HTML element |
| options  | [`UseA11yTriggerOptions`](#usea11ytriggeroptions)  | No        | Configuration options       |

#### UseA11yTriggerOptions

TS 导出接口 UseA11yTriggerOptions { /**

  • Adds this class name to props when the drawer is open / openClass?: string /*
  • Adds this class name to props when the drawer is closed / closedClass?: string /*
  • Adds this style to props when the drawer is open / openStyle?: React.CSSProperties /*
  • Adds this style to props when the drawer is closed / closedStyle?: React.CSSProperties /*
  • Adds an onClick handler in addition to the default one that
  • toggles the drawer's open state. */ onClick?: (e: MouseEvent) => any }
#### Returns

TS 接口 A11yProps> { 只读'aria-controls':字符串| 不明确的 只读'aria-expanded':布尔值 只读角色:“按钮” 只读标签索引:0 只读类名:字符串 | 不明确的 只读样式:React.CSSProperties | 不明确的

#### Example

jsx和谐 从“反应”导入*作为反应 导入 {useA11yTrigger}

从 '@accessible/drawer' const MyTrigger = () => { const ref = React.useRef(null) const a11yProps = useA11yTrigger(ref, { openClass: '打开', closedClass: '关闭', })

返回 (

### &lt;Trigger&gt;

This component wraps any React element and adds an `onClick` handler which toggles the open state
of the drawer target.

#### Props

| Prop        | Type                  | Default     | Required? | Description                                                                                                                |
| ----------- | --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
| closedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the drawer is `closed`.                                          |
| openClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the drawer is `open`.                                            |
| closedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the drawer is `closed`.                                             |
| openStyle   | `React.CSSProperties` | `undefined` | No        | These styles name will be applied to the child element when the drawer is `open`.                                          |
| children    | `React.ReactElement`  | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |

jsx 和谐 <触发=“点击”>

//

### useA11yCloseButton(target, options?)

A React hook for creating a headless close button to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
In addition to providing accessibility props to your component, this hook will add events
for interoperability between actual <button> elements and fake ones e.g. <a> and <div> to the
target element

#### Arguments

| Argument | Type                                                      | Required? | Description                 |
| -------- | --------------------------------------------------------- | --------- | --------------------------- |
| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code>        | Yes       | A React ref or HTML element |
| options  | [`UseA11yCloseButtonOptions`](#usea11yclosebuttonoptions) | No        | Configuration options       |

#### UseA11yCloseButtonOptions

TS 导出接口 UseA11yCloseButtonOptions { /**

  • Adds an onClick handler in addition to the default one that
  • closes the drawer. */ onClick?: (e: MouseEvent) => any }
#### Returns

TS 接口 A11yProps> { 只读'aria-controls':字符串| 不明确的 只读'aria-expanded':布尔值 只读'aria-label':'关闭' 只读角色:“按钮” 只读标签索引:0

#### Example

jsx和谐 从“反应”导入*作为反应 导入 {useA11yCloseButton}

从 '@accessible/drawer' const MyTrigger = () => { const ref = React.useRef(null) const a11yProps = useA11yCloseButton(ref, { onClick: () =>; console.log('关闭!'), })

返回 (

### &lt;CloseButton&gt;

This is a convenience component that wraps any React element and adds an onClick handler which closes the drawer.

#### Props

| Prop     | Type                 | Default     | Required? | Description                                                                                                                |
| -------- | -------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
| children | `React.ReactElement` | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |

jsx 和谐 <关闭按钮>

//

### useDrawer()

This hook provides the value of the drawer's [DrawerContextValue object](#drawercontextvalue)

### DrawerContextValue

打字稿 导出接口 DrawerContextValue { /**

  • The open state of the drawer / isOpen: boolean /*
  • Opens the drawer / open: () => void /*
  • Closes the drawer / close: () => void /*
  • Toggles the open state of the drawer / toggle: () => void /*
  • A unique ID for the drawer target */ id?: string }
#### Example

jsx和谐 const 组件 = () => { const {open, close, toggle, isOpen} = useDrawer() return } ```

LICENSE

麻省理工学院


<Drawer>

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i @accessible/drawer

An accessible and versatile drawer component for React

Features

  • [x] Style-agnostic You can use this component with the styling library of your choice. It works with CSS-in-JS, SASS, plain CSS, plain style objects, anything!
  • [x] Portal-friendly The drawer target will render into React portals of your choice when configured to do so.
  • [x] a11y/aria-compliant This component works with screen readers out of the box and manages focus for you.

Quick Start

Check out the example on CodeSandbox

```jsx harmony import * as React from 'react' import * as Drawer from '@accessible/drawer'

const Component = () => (

<Drawer.Target>
  <div className='my-drawer'>
    <Drawer.CloseButton>
      <button>Close me</button>
    </Drawer.CloseButton>

    <div>I've been revealed!</div>
  </div>
</Drawer.Target>

)

## API

### Components

| Component                       | Description                                                                                                    |
| ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| [`<Drawer>`](#drawer)           | This component creates the context for your drawer target and trigger and contains some configuration options. |
| [`<Target>`](#target)           | This component wraps any React element and turns it into a drawer target.                                      |
| [`<Trigger>`](#trigger)         | This component wraps any React element and turns it into a drawer trigger.                                     |
| [`<CloseButton>`](#closebutton) | This is a convenience component that wraps any React element and adds an onClick handler to close the drawer.  |  |

### Hooks

| Hook                                                        | Description                                                                                                                                                                  |
| ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`useDrawer()`](#usedrawer)                                 | This hook provides the value of the drawer's [DrawerContextValue object](#drawercontextvalue).                                                                               |
| [`useA11yTarget()`](#usea11ytargettarget-options)           | A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).  |
| [`useA11yTrigger()`](#usea11ytriggertarget-options)         | A React hook for creating a headless drawer trigger to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html). |
| [`useA11yCloseButton()`](#usea11yclosebuttontarget-options) | A React hook for creating a headless close button to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).   |

### &lt;Drawer&gt;

This component creates the context for your drawer target and trigger and contains some
configuration options.

#### Props

| Prop        | Type                      | Default     | Required? | Description                                                                                                                                               |
| ----------- | ------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen | `boolean`                 | `false`     | No        | This sets the default open state of the drawer. By default the drawer is closed.                                                                          |
| open        | `boolean`                 | `undefined` | No        | This creates a controlled drawer component where the open state of the drawer is controlled by this property.                                             |
| onChange    | `(open: boolean) => void` | `undefined` | No        | This callback is invoked any time the `open` state of the drawer changes.                                                                                 |
| id          | `string`                  | `undefined` | No        | By default this component creates a unique id for you, as it is required for certain aria attributes. Supplying an id here overrides the auto id feature. |
| children    | `React.ReactNode`         | `undefined` | No        | Your drawer contents and any other children.                                                                                                              |

### useA11yTarget(target, options?)

A React hook for creating a headless drawer target to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).

#### Arguments

| Argument | Type                                               | Required? | Description                 |
| -------- | -------------------------------------------------- | --------- | --------------------------- |
| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes       | A React ref or HTML element |
| options  | [`UseA11yTargetOptions`](#usea11ytargetoptions)    | No        | Configuration options       |

#### UseA11yTargetOptions

ts export interface UseA11yTargetOptions { /**

  • Sets the placement of the drawer menu
  • @default "left" / placement?: 'top' | 'right' | 'bottom' | 'left' /*
  • Adds this class name to props when the drawer is open / openClass?: string /*
  • Adds this class name to props when the drawer is closed / closedClass?: string /*
  • Adds this style to props when the drawer is open / openStyle?: React.CSSProperties /*
  • Adds this style to props when the drawer is closed / closedStyle?: React.CSSProperties /*
  • Prevents the window from scrolling when the target is
  • focused after opening. / preventScroll?: boolean /*
  • When true, this closes the target element when the Escape
  • key is pressed.
  • @default true */ closeOnEscape?: boolean }
#### Returns

ts type A11yProps = { readonly 'aria-hidden': boolean readonly id: string | undefined readonly className: string | undefined readonly style: { readonly visibility: 'hidden' | 'visible' } & React.CSSProperties } & { readonly style: | ({ readonly visibility: 'hidden' | 'visible' } & React.CSSProperties & { readonly position: 'fixed' readonly top: 0 readonly right: 0 readonly bottom: 'auto' readonly left: 0 readonly transform: 'translate3d(0, -100%, 0)' }) | ({ readonly visibility: 'hidden' | 'visible' } & React.CSSProperties & { readonly position: 'fixed' readonly top: 0 readonly right: 0 readonly bottom: 0 readonly left: 'auto' readonly transform: 'translate3d(100%, 0, 0)' }) | ({ readonly visibility: 'hidden' | 'visible' } & React.CSSProperties & { readonly position: 'fixed' readonly top: 'auto' readonly right: 0 readonly bottom: 0 readonly left: 0 readonly transform: 'translate3d(0, 100%, 0)' }) | ({ readonly visibility: 'hidden' | 'visible' } & React.CSSProperties & { readonly position: 'fixed' readonly top: 0 readonly right: 'auto' readonly bottom: 0 readonly left: 0 readonly transform: 'translate3d(-100%, 0, 0)' }) }

#### Example

jsx harmony import * as React from 'react' import {useA11yTarget} from '@accessible/drawer'

const MyTarget = () => { const ref = React.useRef(null) const a11yProps = useA11yTarget(ref, {preventScroll: true})

return (

I am the drawer content
) }

### &lt;Target&gt;

This component wraps any React element and turns it into a drawer target.

#### Props

| Prop          | Type                                     | Default     | Required? | Description                                                                                                                                                                                                     |
| ------------- | ---------------------------------------- | ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placement     | `"top" \| "right" \| "bottom" \| "left"` | `false`     | No        | When `true` this will render the drawer into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| portal        | `boolean \| string \| PortalizeProps`    | `false`     | No        | When `true` this will render the drawer into a React portal with the id `#portals`. You can render it into any portal by providing its query selector here, e.g. `#foobar`, `[data-portal=true]`, or `.foobar`. |
| closeOnEscape | `boolean`                                | `true`      | No        | By default the drawer will close when the `Escape` key is pressed. You can turn this off by providing `false` here.                                                                                             |
| closedClass   | `string`                                 | `undefined` | No        | This class name will be applied to the child element when the drawer is `closed`.                                                                                                                               |
| openClass     | `string`                                 | `undefined` | No        | This class name will be applied to the child element when the drawer is `open`.                                                                                                                                 |
| closedStyle   | `React.CSSProperties`                    | `undefined` | No        | These styles will be applied to the child element when the drawer is `closed` in addition to the default styles that set the target's visibility.                                                               |
| openStyle     | `React.CSSProperties`                    | `undefined` | No        | These styles name will be applied to the child element when the drawer is `open` in addition to the default styles that set the target's visibility.                                                            |
| preventScroll | `boolean`                                | `false`     | No        | When `true` this will prevent your browser from scrolling the document to bring the newly-focused tab into view.                                                                                                |
| children      | `React.ReactElement`                     | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above.                                                                                      |

#### Example

jsx harmony

Alert

//

### useA11yTrigger(target, options?)

A React hook for creating a headless drawer trigger to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
In addition to providing accessibility props to your component, this hook will add events
for interoperability between actual <button> elements and fake ones e.g. <a> and <div> to the
target element

#### Arguments

| Argument | Type                                               | Required? | Description                 |
| -------- | -------------------------------------------------- | --------- | --------------------------- |
| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code> | Yes       | A React ref or HTML element |
| options  | [`UseA11yTriggerOptions`](#usea11ytriggeroptions)  | No        | Configuration options       |

#### UseA11yTriggerOptions

ts export interface UseA11yTriggerOptions { /**

  • Adds this class name to props when the drawer is open / openClass?: string /*
  • Adds this class name to props when the drawer is closed / closedClass?: string /*
  • Adds this style to props when the drawer is open / openStyle?: React.CSSProperties /*
  • Adds this style to props when the drawer is closed / closedStyle?: React.CSSProperties /*
  • Adds an onClick handler in addition to the default one that
  • toggles the drawer's open state. */ onClick?: (e: MouseEvent) => any }
#### Returns

ts interface A11yProps> { readonly 'aria-controls': string | undefined readonly 'aria-expanded': boolean readonly role: 'button' readonly tabIndex: 0 readonly className: string | undefined readonly style: React.CSSProperties | undefined }

#### Example

jsx harmony import * as React from 'react' import {useA11yTrigger} from '@accessible/drawer'

const MyTrigger = () => { const ref = React.useRef(null) const a11yProps = useA11yTrigger(ref, { openClass: 'open', closedClass: 'closed', })

return ( ) }

### &lt;Trigger&gt;

This component wraps any React element and adds an `onClick` handler which toggles the open state
of the drawer target.

#### Props

| Prop        | Type                  | Default     | Required? | Description                                                                                                                |
| ----------- | --------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
| closedClass | `string`              | `undefined` | No        | This class name will be applied to the child element when the drawer is `closed`.                                          |
| openClass   | `string`              | `undefined` | No        | This class name will be applied to the child element when the drawer is `open`.                                            |
| closedStyle | `React.CSSProperties` | `undefined` | No        | These styles will be applied to the child element when the drawer is `closed`.                                             |
| openStyle   | `React.CSSProperties` | `undefined` | No        | These styles name will be applied to the child element when the drawer is `open`.                                          |
| children    | `React.ReactElement`  | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |

jsx harmony

//

### useA11yCloseButton(target, options?)

A React hook for creating a headless close button to [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html).
In addition to providing accessibility props to your component, this hook will add events
for interoperability between actual <button> elements and fake ones e.g. <a> and <div> to the
target element

#### Arguments

| Argument | Type                                                      | Required? | Description                 |
| -------- | --------------------------------------------------------- | --------- | --------------------------- |
| target   | <code>React.RefObject&lt;T&gt; \| T \| null</code>        | Yes       | A React ref or HTML element |
| options  | [`UseA11yCloseButtonOptions`](#usea11yclosebuttonoptions) | No        | Configuration options       |

#### UseA11yCloseButtonOptions

ts export interface UseA11yCloseButtonOptions { /**

  • Adds an onClick handler in addition to the default one that
  • closes the drawer. */ onClick?: (e: MouseEvent) => any }
#### Returns

ts interface A11yProps> { readonly 'aria-controls': string | undefined readonly 'aria-expanded': boolean readonly 'aria-label': 'Close' readonly role: 'button' readonly tabIndex: 0 }

#### Example

jsx harmony import * as React from 'react' import {useA11yCloseButton} from '@accessible/drawer'

const MyTrigger = () => { const ref = React.useRef(null) const a11yProps = useA11yCloseButton(ref, { onClick: () => console.log('Closing!'), })

return ( ) }

### &lt;CloseButton&gt;

This is a convenience component that wraps any React element and adds an onClick handler which closes the drawer.

#### Props

| Prop     | Type                 | Default     | Required? | Description                                                                                                                |
| -------- | -------------------- | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
| children | `React.ReactElement` | `undefined` | Yes       | The child is cloned by this component and has aria attributes injected into its props as well as the events defined above. |

jsx harmony

//

### useDrawer()

This hook provides the value of the drawer's [DrawerContextValue object](#drawercontextvalue)

### DrawerContextValue

typescript export interface DrawerContextValue { /**

  • The open state of the drawer / isOpen: boolean /*
  • Opens the drawer / open: () => void /*
  • Closes the drawer / close: () => void /*
  • Toggles the open state of the drawer / toggle: () => void /*
  • A unique ID for the drawer target */ id?: string }
#### Example

jsx harmony const Component = () => { const {open, close, toggle, isOpen} = useDrawer() return } ```

LICENSE

MIT

更多

友情链接

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文