Sha256: 7feb20d1f8fbb487d1e0821e6b77a1bc64d0ca9e96394944e26b7f0c911f1d8a

Contents?: true

Size: 613 Bytes

Versions: 1573

Compression:

Stored size: 613 Bytes

Contents

To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.

`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`

Version data entries

1,573 entries across 1,573 versions & 2 rubygems

Version Path
playbook_ui-12.33.0.pre.alpha.revert2650closedialogonoutsideclick977 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.33.0 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.32.0 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.32.0 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.hoverrails951 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.hoverrails951 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.hoverrails948 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.hoverrails948 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.multilevelnopillsdesigns944 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.multilevelnopillsdesigns944 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.multilevelnopillsdesigns941 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.multilevelnopillsdesigns941 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.PLAY814removemomentjs935 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.PLAY814removemomentjs935 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.PLAY814removemomentjs933 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.PLAY814removemomentjs933 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.datepickerdisableddatefix931 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.datepickerdisableddatefix931 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui_docs-12.31.0.pre.alpha.customiconsfa928 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
playbook_ui-12.31.0.pre.alpha.customiconsfa928 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md