Katachi

The simplest React form component ever!

Install

npm install katachi

Or with Yarn

yarn add katachi

Example Usage

// MyCoolForm.tsx

import { Form } from 'katachi';

export const MyCoolForm = () => {
  function handleOnSubmit(data) {
    console.log(data);
  }

  return (
    <Form onSubmit={handleOnSubmit}>
      <input name="name" defaultValue="Daniel" />
      <input name="anime[]" defaultValue="Re: Zero" />
      <input name="anime[]" defaultValue="My Hero Academia" />
      <input name="anime[]" defaultValue="Attack On Titan" />
      <input name="games[first]" defaultValue="Nier Automata" />
      <input name="games[second]" defaultValue="Final Fantasy 7" />
      <input name="games[third]" defaultValue="Smash Bros" />
      <button>Submit</button>
    </Form>
  );
};

Submitting the example above would give you:

{
  name: 'Daniel',
  anime: ['Re: Zero', 'My Hero Academia', 'Attack On Titan'],
  games: {
    first: 'Nier Automata',
    second: 'Final Fantasy 7',
    third: 'Smash Bros',
  },
}

Can't get any simpler than that! 😎