Skip to content

Instantly share code, notes, and snippets.

@raysrashmi
Last active August 5, 2023 10:53
Show Gist options
  • Save raysrashmi/ae5ea12659847fc0310fd441f1d10e1e to your computer and use it in GitHub Desktop.
Save raysrashmi/ae5ea12659847fc0310fd441f1d10e1e to your computer and use it in GitHub Desktop.
<TextInput
type="text"
id="First name"
placeholder="Enter first name"
{...register('firstName')}
/>
const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextInputProps>(
({ id, type, placeholder, required, value, defaultValue, disabled, onChange, ...register }, ref) => {
return (
<input
className={`block w-full rounded-lg border border-gray-300 p-3 text-text focus:border-blue-500 focus:ring-blue-500 ${
disabled && 'bg-disabled'
}`}
ref={ref as React.ForwardedRef<HTMLInputElement>}
onChange={onChange}
value={value}
type={type}
id={id}
placeholder={placeholder}
required={required}
disabled={disabled}
defaultValue={defaultValue}
{...register}
/>
);
},
);
@igorzobenica
Copy link

const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextInputProps>(
  ({ id, type, placeholder, required, value, defaultValue, disabled, onChange, register }, ref) => { 
    return (
      <input
        className={`block w-full rounded-lg border border-gray-300 p-3 text-text focus:border-blue-500 focus:ring-blue-500 ${
          disabled && 'bg-disabled'
        }`}
        ref={ref as React.ForwardedRef<HTMLInputElement>}
        onChange={onChange}
        value={value}
        type={type}
        id={id}
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        defaultValue={defaultValue}
        {...register}
      />
    );
  },
);

@igorzobenica
Copy link

<TextInput
    type="text"
    id="First name"
    placeholder="Enter first name"
    register={...register('firstName')}
/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment