The solid-phone-number-input component is a component inspired on the library react-phone-number-input from catamphetamine that includes a select with 242 countries with their respective flags and returns their iso code + the number used on the phone input
It is very easy to use the phone input component. You can do this in just a few simple steps:
If you are using npm:
npm i @digichanges/solid-phone-number-input
Or if you are using pnpm:
pnpm i @digichanges/solid-phone-number-input
1 - Import the component.
'@digichanges/solid-phone-number-input/src/App';
2 - The phone input must be inside a parent element that has a state, which will allow you to have access to the component value.
3 - Add the required props value and onChange, which should be the state previously added:
If you do a console.log of the state value, you will see the value of the input changing dynamically:
| Name | Function | Required |
|---|---|---|
| value | Is an accesor that tells the component the actual value of the input | ✅ |
| onChange | A setter that allows the component to change its value. | ✅ |
| disabled | Set to true to mark both the phone number input and the country select as disabled. | ❌ |
| readOnly | Set to true to mark both the phone number input and the country select as readonly. | ❌ |
| autoComplete | Sets autoComplete property for phone number input. | ❌ |
| className | component CSS class. | ❌ |
| style | component style object. | ❌ |
| countrySelectComponent | Country select component. Receive properties: {className, style} | ❌ |