editable-contracts

editable-contracts

Another React form state management library, but so simple it doesn't exist.

Editing DTO in React controlled form typically requires:

1. Mapping individual values from DTO to React form components such as inputs, dropdowns, radio buttons, etc..
2. Creating and providing onChange and onBlur handlers to React components to update DTO state
3. Validating DTO before it can be submitted back to the server
4. Subscribing React components on changes in DTO state to update UI

editable-contracts purpose is to reduce amount of boilerplate code you need to build controlled React forms without compromising typesafety while adding almost zero additional abstractions on top of existing DTO <--> UI mapping chain. Essentially it takes DTO and derives an editor object of the same shape but loaded with all you need for React form state management and validation.

Enough said, example:

interface User {
    id: number;
    name?: string;
    age?: number;
}

const user: User = {
    id: 1,
    name: 'Mark'
};

const userEditor = editor(user);

const Form: React.FC = observer(() => (
    <form>
        <label>Name</label>
        <input value={user.name} onChange={userEditor.$.name.onChange} />
        <label>Age</label>
        <input value={user.age} onChange={userEditor.$.age.onChange} />
    </form>
));