Sha256: 5be62adae432db3e77d3da02a6d999191835d8dcb0c879fc1fc817f1b99a194b

Contents?: true

Size: 728 Bytes

Versions: 1007

Compression:

Stored size: 728 Bytes

Contents

import React, { useRef } from 'react'
import { Button, PhoneNumberInput } from 'playbook-ui'

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

    // 2. Use clearField() to clear the field.
    const handleClick = () => {
        ref.current.clearField()
    }

    // 3. Pass the ref to the ref prop.
    return (
        <>
            <PhoneNumberInput
                id="clear-field"
                ref={ref}
                {...props}
            />

            <Button
                onClick={handleClick}
                text="Clear the Input Field"
            />
        </>
    )
}

export default PhoneNumberInputClearField

Version data entries

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

Version Path
playbook_ui-14.1.0.pre.alpha.fixaction3547 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.1.0.pre.alpha.PA1477timestampkit3536 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.1.0.pre.alpha.PA1477timestampkit3536 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.testthemeexport3533 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.testthemeexport3533 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.updateviewcomponentgem3527 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.updateviewcomponentgem3527 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.PLAY15063526 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.PLAY15063526 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.PLAY15063525 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.PLAY15063525 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.PLAY15063524 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.PLAY15063524 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.PLAY15063523 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.PLAY15063523 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.PLAY15063522 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.PLAY15063522 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.PBNTR416formpillsizes3521 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.0.0.pre.alpha.PLAY15063520 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.0.0.pre.alpha.PBNTR416formpillsizes3521 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx