Sha256: 5be62adae432db3e77d3da02a6d999191835d8dcb0c879fc1fc817f1b99a194b

Contents?: true

Size: 728 Bytes

Versions: 948

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

948 entries across 948 versions & 2 rubygems

Version Path
playbook_ui_docs-14.11.1.pre.alpha.PLAY17445539 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.11.1.pre.alpha.PLAY17445539 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR798datepickerturbo5537 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR798datepickerturbo5537 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.11.1.pre.alpha.PLAY1751pbcontenttagpt25529 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.11.1.pre.alpha.PLAY1751pbcontenttagpt25529 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR7495495 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR7495495 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.12.0.pre.rc.11 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.12.0.pre.rc.11 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.12.0.pre.rc.10 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.12.0.pre.rc.10 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.12.0.pre.rc.9 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.12.0.pre.rc.9 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.12.0.pre.rc.8 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.12.0.pre.rc.8 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui_docs-14.12.0.pre.rc.7 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
playbook_ui-14.12.0.pre.rc.7 app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx