Sha256: 18fd9ce8df9e681035b7b13e85d38ebd5369473e530282e525192669a6817c67

Contents?: true

Size: 797 Bytes

Versions: 625

Compression:

Stored size: 797 Bytes

Contents

import React, { useEffect, useRef } from 'react'
import { Body, PhoneNumberInput } from '../..'

const PhoneNumberInputAccessInputElement = (props) => {
    // 1. Create a ref - this accesses the kit's input element.
    const ref = useRef()

    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
    useEffect(() => {
        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
    }, [])

    // 3. Pass the ref to the ref prop.
    return (
        <>
            <Body text="Click the input field below:" />
            <PhoneNumberInput
                id="access-input-element"
                ref={ref}
                {...props}
            />
        </>
    )
}

export default PhoneNumberInputAccessInputElement

Version data entries

625 entries across 625 versions & 2 rubygems

Version Path
playbook_ui_docs-13.32.0 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.32.0 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.31.0.pre.alpha.powercentrainplaybookpt23212 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.31.0.pre.alpha.powercentrainplaybookpt23212 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.31.0.pre.alpha.PLAY10863204 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.31.0.pre.alpha.PLAY10863204 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.31.0.pre.alpha.PLAY10863202 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.31.0.pre.alpha.PLAY10863202 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.31.0.pre.alpha.play1262iconstyles3172 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.31.0.pre.alpha.play1262iconstyles3172 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.31.0.pre.alpha.play1262iconstyles3171 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.31.0.pre.alpha.play1262iconstyles3171 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.31.0 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.31.0 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.30.0.pre.alpha.play1367contenttagnoninputkits3159 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.30.0.pre.alpha.play1367contenttagnoninputkits3159 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui_docs-13.30.0.pre.alpha.20240515remotebuildkitconversion3150 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
playbook_ui-13.30.0.pre.alpha.20240515remotebuildkitconversion3150 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx