diff --git a/src/components/InnerBlockSlider/README.md b/src/components/InnerBlockSlider/README.md index fcc2827..623f1fc 100644 --- a/src/components/InnerBlockSlider/README.md +++ b/src/components/InnerBlockSlider/README.md @@ -98,26 +98,29 @@ The above example code creates a slider using the core image block as each slide ## Props -| Name | Type | Default | Description | -| --------------- | -------------- | ------- | --------------------------------------------- | -| `allowedBlock` | `string` | `''` | Block types to be allowed inside the slider | -| `slideLimit` | `integer` | `10` | Maximum number of slides. | -| `parentBlockId` | `string` | `''` | Client ID of parent block. This is required. | -| `externalCurrentItemIndex` | `string` | `null` | Optional. Current slide index. If you need to access to the current item index externally, then you need to manage that state externally. | -| `setExternalCurrentItemIndex` | `function` | `null` | Optional. Function to update the current slide index. If you need to access to the current item index externally, then you need to manage that state externally. | - +| Name | Type | Default | Description | +| ---------------- | -------------- | ------- | --------------------------------------------- | +| `allowedBlock` | `string` | `''` | Block types to be allowed inside the slider | +| `slideLimit` | `integer` | `10` | Maximum number of slides. | +| `parentBlockId` | `string` | `''` | Client ID of parent block. This is required. | +| `showNavigation` | `bool` | `true` | Whether to show slide navigation/pagination. | ## Examples ### Managing the state externally. +If you need to sync the slider component state it with some other external functionality, you may need to manage state in your code. In order to to this, you need to import the InnerBlockSliderStateless rather than the standard container component exposed by the library. + ```js +import InnerBlockSliderStateless from '@humanmade/block-editor-components'; + const [ currentItemIndex, setCurrentItemIndex ] = useState( 0 ); ``` diff --git a/src/components/InnerBlockSlider/index.js b/src/components/InnerBlockSlider/index.js index 93e33ec..b3b384c 100644 --- a/src/components/InnerBlockSlider/index.js +++ b/src/components/InnerBlockSlider/index.js @@ -5,6 +5,9 @@ import InnerBlockSlider from './inner-block-slider.js'; /** * InnerBlockSlider container component. * + * This container component is recommended for typical usage, as it handles state management. + * However for further info on supported props, refer to the InnerBlockSlider component, as all props are passed through. + * * @param {object} props Component props. * @returns {React.ReactNode} Component. */ diff --git a/src/index.js b/src/index.js index 6350054..5f88653 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ export { default as FileControls } from './components/FileControls'; export { default as GenericServerSideEdit } from './components/GenericServerSideEdit'; export { default as ImageControl } from './components/ImageControl'; export { default as InnerBlockSlider } from './components/InnerBlockSlider'; +export { default as InnerBlockSliderStateless } from './components/InnerBlockSlider/inner-block-slider'; export { default as LinkToolbar } from './components/LinkToolbar'; export { default as PlainTextWithLimit } from './components/PlainTextWithLimit'; export { default as PostTitleControl } from './components/PostTitleControl';