​
Development

If you installed the component, you can start developing your project with the component. Just import the component and use it as it is in your project.

App.tsx
import { ZentaraInput } from '@zentara/core';

function App() {
  return <ZentaraInput />;
}

​
Implemented like native <input />

The component is implemented like native <input /> component, technically there is no difference between using the component and native <input /> component.

App.tsx
import { ZentaraInput } from '@zentara/core';

function App() {
  const [value, setValue] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      <ZentaraInput
        ref={inputRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button onClick={() => inputRef.current?.focus()}>Focus</button>
    </div>
  );
}

​
Use with other libraries

You can use the component with other libraries like react-hook-form, formik, zod, etc.

App.tsx
import { ZentaraInput } from '@zentara/core';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

const schema = z.object({
  name: z.string().min(1),
});

function App() {
  const { register, handleSubmit } = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
  });

  return <ZentaraInput {...register('name')} />;
}

Curious about what changed? Check out the release notes.