React Reformed Revised

A fork of react-reformed, a great minimalistic approach to manage form data in React

Usage

With Redux

To pull intialModel data from the store, create the form as usual.

Map your state to an object named initialModel:

const mapStateToProps = ({title, year, director}) => ({
  initialModel: {
    title,
    year,
    director
  }
})

Then hook redux to react-reformed-revised using the RRR's compose function:

compose(
  connect(mapStateToProps),
  reformed()
)(MyForm)

The result will be something like this:

<Connect HOC>
	<Reformed HOC>
		<MyForm />
	</Reformed HOC>
</Connect HOC>

<Connect> supplies the initialModel to <Reformed> as a prop. <Reformed> passes it down to <MyForm> along with the model and helper methods.

API Documentation

reformed : (Props -> Props) -> ReactComponent -> ReactComponent

Wraps a React component and injects the form model and setters for that model. You can optionally pass in a function to the first reformed call that will transform the props that reformed applies to the wrapped component. This is really just for experimentation and to keep the API open for the future.

Example:

class YourForm extends React.Component {
  /* ... */
}

reformed()(YourForm)

setProperty : (String k, v) -> {k:v}

Injected by the reformed higher order component. Allows you to set a specific property on the model.

Example:

this.props.setProperty('firstName', 'Billy')

setModel : {k:v} -> {k:v}

Injected by the reformed higher order component. Allows you to completely override the model.

Example:

this.props.setModel({
  firstName: 'Bob',
  lastName: 'Loblaw'
})

bindInput : String k -> Props

Injected by the reformed higher order component. Applies name, value, and onChange properties to the input element. Because this does not have a ref to your component or know anything other than the name of the model property, it cannot handle every possible scenario. As such, this should mostly just be used for simple text inputs where the event target's name and value can be used to update the property.

When other use cases arise, it's recommended to just use setProperty or setModel directly or extend reformed to provide the bindings you need.

Example:

<input {...this.props.bindInput('firstName') />