Create Redux-Forms dynamically out of metadata
Beta version disclaimer
redux-autoform
is under active development. APIs will change and things may still not work as expected. If you find
any issue, please report it. We'll do my best to fix it.
Redux-Autoform is an UI agnostic library for dynamically generating redux-form out of metadata.
npm install redux-autoform
The main React component.
import { AutoForm } from 'redux-autoform';
The AutoForm
props are listed here.
The 2 most important props AutoForm
should receive is the schema
and the componentFactory
.
The schema represents the application domain. All entities, layouts and their metadata is contained in the schema. More information here.
The ComponentFactory
is responsible for determining which React component to use for a given field metadata. redux-autoform
doesn't have any built-in factory, for that you can use either
Bootstrap (beta state) or Material-UI (beta state).
Assuming Bootstrap, you can get the factories like this:
import { EditComponentFactory, DetailsComponentFactory } from 'redux-autoform-bootstrap-ui';
Either one of these factories now should be passed as prop Autoform as described in the docs.
AutoForm doesn't directly depend on localization, but both the Bootstrap and Material-UI factories do. So, if you're using these, this is what you should do:
// import moment and numbro
import moment from 'moment';
import numbro from 'numbro';
// import the localizers
import { momentLocalizer, numbroLocalizer } from 'redux-autoform';
// if you are using react-widgets, which is used by default on the standard factories, you need to import it's localizer too:
import reactWidgetsMomentLocalizer from 'react-widgets/lib/localizers/moment';
// set up the localizers
momentLocalizer(moment);
numbroLocalizer(numbro);
reactWidgetsMomentLocalizer(moment); // THIS IS ONLY IMPORTANT WHEN USING BOOTSTRAP
The styling will depend on the UI you're using:
Redux-Autoform provides a really minimalist demo. In order to run the demo, run:
npm run start
Now the demo should be available here: http://localhost:4000/.
npm run test // will run the Karma tests PhantomJS
// OR
npm run test-chrome // will run the Karma tests on Chrome
Pull-requests are really really welcome. If you don't know what to contribute with, please check the issues.
We'll be more than glad to invite frequent contributors to join the organization. If you need help understanding the project, please post an issue and I'll do my best to reply and make sure you understand everything you need.
In order to make a pull request:
redux-autoform
is MIT licensed.