Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/redux-autoform/redux-autoform
Create Redux-Forms dynamically out of metadata
https://github.com/redux-autoform/redux-autoform
components json-metadata metadata-api react redux redux-form
Last synced: about 1 month ago
JSON representation
Create Redux-Forms dynamically out of metadata
- Host: GitHub
- URL: https://github.com/redux-autoform/redux-autoform
- Owner: redux-autoform
- License: mit
- Created: 2016-04-26T17:46:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-16T22:36:53.000Z (about 7 years ago)
- Last Synced: 2024-04-26T15:46:53.149Z (8 months ago)
- Topics: components, json-metadata, metadata-api, react, redux, redux-form
- Language: JavaScript
- Size: 566 KB
- Stars: 112
- Watchers: 7
- Forks: 23
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react - Redux-Autoform - Create Redux-Forms dynamically out of metadata
README
[](https://travis-ci.org/redux-autoform/redux-autoform) [](https://badge.fury.io/js/redux-autoform) [](https://codecov.io/gh/redux-autoform/redux-autoform) [](https://coveralls.io/github/redux-autoform/redux-autoform?branch=master)
[](https://nodei.co/npm/redux-autoform/) [](https://nodei.co/npm/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](https://github.com/gearz-lab/redux-autoform/issues). We'll do my best to fix it.
- [Introduction](#introduction)
- [Supported UI frameworks](#supported-ui-frameworks)
- [Demos](#demos)
- [Docs](#docs)
- [Installing](#installing)
- [Using](#using)
- [Localization](#localization)
- [Styles](#styles)
- [Building and running the demo locally](#building-and-running-the-demo-locally)
- [Running the tests](#running-the-tests)
- [Contributing](#contributing)
- [License](#license)
Introduction
------------
Redux-Autoform is an UI agnostic library for dynamically generating [redux-form](https://github.com/erikras/redux-form) out of metadata.
Supported UI frameworks
------------------------
- [Bootstrap](https://github.com/redux-autoform/redux-autoform-bootstrap-ui) (beta state)
- [Material-UI](https://github.com/redux-autoform/redux-autoform-material-ui) (beta state)
Demos
-----
- [Bootstrap demo](https://redux-autoform.github.io/redux-autoform-bootstrap-ui/demo.html).
- [Material-UI demo](https://redux-autoform.github.io/redux-autoform-material-ui).
Docs
---
[Docs are available here](https://github.com/gearz-lab/redux-autoform/blob/master/docs-md/documentation.md).
Installing
---
npm install redux-autoform
Using
---
#### AutoForm ([source](https://github.com/gearz-lab/redux-autoform/blob/master/src/AutoForm.js))
The main React component.
```js
import { AutoForm } from 'redux-autoform';
```
The `AutoForm` props are listed [here](https://github.com/redux-autoform/redux-autoform/blob/master/docs-md/documentation.md#autoform).
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](https://github.com/redux-autoform/redux-autoform/blob/master/docs-md/documentation.md#schema).
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](https://github.com/redux-autoform/redux-autoform-bootstrap-ui) (beta state) or [Material-UI](https://github.com/redux-autoform/redux-autoform-material-ui) (beta state).
Assuming Bootstrap, you can get the factories like this:
```js
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](https://github.com/gearz-lab/redux-autoform/blob/master/docs-md/documentation.md).
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](http://numbrojs.com/). This is the library used for number localization.
- Install [moment](http://momentjs.com/). This is the library used for datetime localization.
```js
// 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](https://github.com/redux-autoform/redux-autoform-bootstrap-ui#styling)
- 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/](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](https://github.com/gearz-lab/redux-autoform/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](https://github.com/gearz-lab/redux-autoform/blob/master/LICENSE) licensed.