redux-autoform

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.

• Introduction
• Supported UI frameworks
• Demos
• Docs
• Installing
• Using
• Localization
• Styles
• Building and running the demo locally
• Running the tests
• Contributing
• License

Introduction

Redux-Autoform is an UI agnostic library for dynamically generating redux-form out of metadata.

Supported UI frameworks

• Bootstrap (beta state)
• Material-UI (beta state)

Demos

• Bootstrap demo.
• [Material-UI demo] (https://redux-autoform.github.io/redux-autoform-material-ui).

Docs

Docs are available here.

Installing

npm install redux-autoform

Using

AutoForm (source)

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.

Localization

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:

• Install numbro. This is the library used for number localization.
• Install moment. This is the library used for datetime localization.

// 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

Styles

The styling will depend on the UI you're using:

• Adding styles for the Bootstrap UI
• Adding styles for the Material UI (under development)

Building and running the demo locally

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/.

Running the tests

npm run test // will run the Karma tests PhantomJS
// OR
npm run test-chrome // will run the Karma tests on Chrome

Contributing

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:

1. Fork it.
2. Create your feature-branch git checkout -b your-new-feature-branch
3. Commit your change git commit -am 'Add new feature'
4. Push to the branch git push origin your-new-feature-branch
5. Create new Pull Request with master branch

License

redux-autoform is MIT licensed.