ReformContext

Your forms need to know which themes and validations are available within your app. ReformContext uses React's context feature to propage this information.

For this to work, you need to put the ReformContext component at the root of your app.

Have a look here for how to use it:

import React, {Component} from 'react'
import {render} from 'react-dom'
import {ReformContext, createTheme} from 'react-reform'
import defaultValidations from 'react-reform/opt/validations'

const defaultTheme = createTheme(...)
const darkTheme = createTheme(...)
const singleInputTheme = createTheme(...)

const themes = {
  default: defaultTheme,
  dark: darkTheme,
  singleInput: singleInputTheme
};

const validations = {
  ...defaultValidations,
  validTag: {...}
}

class App extends Component {

  render() {
    return (
      <ReformContext themes={themes} validations={validations}>
        <div>
          ...Your App Code...
        </div>
      </ReformContext>
    )
  }
}

render(<App/>, document.getElementById('root'))

themes prop

The themes prop expect an object mapping keys to themes.

The key names allow to set a form's theme like this:

<Form theme="singleInput" onSubmit={this.handleSubmit}>
  ...
</Form>

If a form sets no explicit theme, the default theme will be chosen.

validations prop

To setup validations, use the validations prop. Pass an object that maps validation names to an validation object.

This validation names can then be used by inputs by prefixing is or has:

<Form onSubmit={this.handleSubmit}>
  <Text name="tag" isRequired isValidTag hasMinlength={3}/>
</Form>