Skip to content

Commit

Permalink
Enhance the component doc
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed Oct 29, 2019
1 parent 824c896 commit 9f983c3
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 0 deletions.
27 changes: 27 additions & 0 deletions packages/data/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,33 @@ Specific implementation differences from Redux and React Redux:
Context Provider Component used to switch the data module component rerendering
between Sync and Async modes.

_Usage_

```js
import { useSelect, AsyncModeProvider } from '@wordpress/data';

function BlockCount() {
const count = useSelect( ( select ) => {
return select( 'core/block-editor' ).getBlockCount()
} );

return count;
}

function App() {
return (
<AsyncModeProvider value={ true }>
<BlockCount />
</AsyncModeProvider>
);
}
```

In this example, the BlockCount component is rerendered asynchronously.
It means if a more critical task is being performed (like typing in an input),
the rerendering is delayed until the browser becomes IDLE.
It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.

_Parameters_

- _props.value_ `boolean`: Enable Async Mode.
Expand Down
27 changes: 27 additions & 0 deletions packages/data/src/components/async-mode-provider/context.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,33 @@ export const AsyncModeConsumer = Consumer;
* Context Provider Component used to switch the data module component rerendering
* between Sync and Async modes.
*
* @example
*
* ```js
* import { useSelect, AsyncModeProvider } from '@wordpress/data';
*
* function BlockCount() {
* const count = useSelect( ( select ) => {
* return select( 'core/block-editor' ).getBlockCount()
* } );
*
* return count;
* }
*
* function App() {
* return (
* <AsyncModeProvider value={ true }>
* <BlockCount />
* </AsyncModeProvider>
* );
* }
* ```
*
* In this example, the BlockCount component is rerendered asynchronously.
* It means if a more critical task is being performed (like typing in an input),
* the rerendering is delayed until the browser becomes IDLE.
* It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.
*
* @param {boolean} props.value Enable Async Mode.
* @return {WPComponent} The component to be rendered.
*/
Expand Down

0 comments on commit 9f983c3

Please sign in to comment.