typesnippet / antd-phone-input

Advanced, highly customizable phone input component for Ant Design.
https://playground.typesnippet.org/antd-phone-input-5.x/
MIT License
60 stars 11 forks source link

Add ref prop support #64

Closed solo-bog-uptech closed 10 months ago

solo-bog-uptech commented 11 months ago

Summary

I use react-hook-form lib for handling forms and it needs ref prop in PhoneInput component.

ArtyomVancyan commented 11 months ago

Hi @solo-bog-uptech, thanks for opening the issue. I have already added support for ref property and tested it with the following demo component. The new library version will be published after covering all your opened issues (meaning #65).

import Button from "antd/es/button";
import PhoneInput from "antd-phone-input";
import {useForm} from "react-hook-form";

const Demo = () => {
    const {register, handleSubmit} = useForm();

    const phoneRegister = register("phone", {
        validate: ({valid = () => false}: any = {}) => valid(),
    });

    const onChange = (value: any) => phoneRegister.onChange({target: {value, name: phoneRegister.name}});

    return (
        <form onSubmit={handleSubmit(console.log)}>
            <PhoneInput
                enableSearch
                {...phoneRegister}
                onChange={onChange}
            />
            <Button htmlType="submit">Submit</Button>
        </form>
    )
}

export default Demo;
ArtyomVancyan commented 10 months ago

Closing the issue because of inactivity. The changes will be available in the next release.