diff --git a/docs/pages/components/index.js b/docs/pages/components/index.js index ba613d5e1a..e7ef490d7b 100644 --- a/docs/pages/components/index.js +++ b/docs/pages/components/index.js @@ -53,6 +53,16 @@ export default function Components() { property. These components are given all the current props and state letting you achieve anything you dream up. + ## Inner Ref + Some components also take an innerRef prop that react-select needs in + order to manage internal behaviour. Please assign this to the ref + property of the relevant react-element. For example: + + ~~~~ + const CustomOption = ({ innerRef, innerProps }) => ( +
) + ~~~~ + ### Inner Props All functional properties that the component needs are provided in diff --git a/docs/pages/props/index.js b/docs/pages/props/index.js index 980e1d4e67..699bea114d 100644 --- a/docs/pages/props/index.js +++ b/docs/pages/props/index.js @@ -112,6 +112,17 @@ export default function Api() { letting you achieve anything you dream up. For more information in replacing components see [the components documentation](/components) + ### Inner Ref + Some components are passed an innerRef property to facilitate for internally + managed behaviour within the base select. This should be assigned to the + ref property of the relevant dom element. + i.e. + + ~~~ + const CustomOptionComponent = ({ innerProps, innerRef }) => + () + ~~~ + ### Inner Props All functional properties that the component needs are provided in diff --git a/docs/pages/upgradeGuide/index.js b/docs/pages/upgradeGuide/index.js index 5480de0b94..8ffd6eeb95 100644 --- a/docs/pages/upgradeGuide/index.js +++ b/docs/pages/upgradeGuide/index.js @@ -195,7 +195,7 @@ For example, to render a custom \`Option\` component: ~~~js components={{ Option: ({ children, innerProps }) => ( -