React Object Input

![](https://github.com/gregplaysguitar/react-object-input/actions?query=workflow%3ABuild)

A React component which facilitates user-friendly editing of plain javascript objects. The result acts as a controlled component, suitable for use in a React form - no internal state to get out of sync. The UI maintains consistent order of items, despite object giving no order guarantees.

Check out a demo

In Typescript terms, given a Record, where T is some arbitrary type, and a React component which can edit a single instance of T, ObjectInput provides the scaffolding for a property-list-style editor.

!Object Input demo

Example implementation

``typescript export const MyComponent = () => { // create a simple object to edit - this can be as complex as you like, e.g. // > - so long as CustomType is handled by the // renderItem callback below const [value, setValue] = useState>({ a: '123', b: '456' })

return ( obj={value} onChange={setValue} renderItem={(key, value, updateKey, updateValue, deleteProperty) => ( // render an editor row for an item, using the provided callbacks // to propagate changes


                      type="text"
            value={key}
            onChange={e => updateKey(e.target.value)}
          />
          :
                      type="text"
            value={value || ''} // value will be undefined for new rows
            onChange={e => updateValue(e.target.value)}
          />


      )}
    />
  )
}


Development
To build the library and watch for changes

`npm i # or yarn npm start # or yarn start`

With start running as above, run the example:

`cd example npm i # or yarn to install dependencies npm start # or yarn start`

`$3`

`npm test # or yarn test``