react-ctx-form v0.0.10

react-ctx-form (coming soon...please do not use it yet)

Example:

import React, { memo, useContext } from 'react';
import compose from 'lodash/fp/compose';

import Form, {context, formWrapper, withForm, util} from 'react-ctx-form';

const SomeComponent = withForm('myAnother', 'customFormPropName')(({ customFormPropName }) => (
	<div>
    {customFormPropName.getValue('c')}
		<input name="b" />
		<select name="c">
			<option value="1">1</option>
			<option value="2">2</option>
		</select>
	</div>
));

const App = ({myForm}) => {
	const formsContext = useContext(context);

  const reset = (e) => {
    e.preventDefault();

    myForm.reset({ a: 10, c: 2 });
  };

	return (
    <div className="App">
      <header className="App-header">
        header
      </header>
      <div style={{display: 'flex'}}>
        <pre>
          {JSON.stringify(formsContext.forms, null, "\t")}
        </pre>
        <Form name="myForm" initialValues={{a: 'ruvi', c: '2'}}>
          <input name="a"/>
          {myForm.getValue('a')}
          {JSON.stringify(myForm.getField('a'))}
          <SomeComponent/>
          <Form name="myAnother" initialValues={{a: 'ruvi', c: '2'}}>
            <input name="a"/>
            <SomeComponent/>
          </Form>
          <button onClick={reset}>Reset</button>
        </Form>
      </div>
    </div>
	);
};

export default compose(
  memo,
  formWrapper,
  withForm('myForm')
)(App);