Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zmitry/redux-form-antd
Ant design bindings for redux form
https://github.com/zmitry/redux-form-antd
ant-design antd final-form redux-final-form redux-form
Last synced: 29 days ago
JSON representation
Ant design bindings for redux form
- Host: GitHub
- URL: https://github.com/zmitry/redux-form-antd
- Owner: zmitry
- License: mit
- Created: 2017-06-05T12:35:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-29T08:42:41.000Z (about 2 years ago)
- Last Synced: 2024-12-13T03:14:42.493Z (about 1 month ago)
- Topics: ant-design, antd, final-form, redux-final-form, redux-form
- Language: JavaScript
- Homepage: https://zmitry.github.io/redux-form-antd/
- Size: 4.13 MB
- Stars: 106
- Watchers: 4
- Forks: 37
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-form-antd
Bindings for redux-form and antd.
This library should be compatible for both redux-form and react-final-form.
Stories for final-form are welcome.
[](https://www.npmjs.com/package/redux-form-antd)
---
[`redux-form-antd`](https://github.com/zhdmitry/redux-form-antd) is a set of
wrappers to facilitate the use of antd components with
[`redux-form`](https://github.com/erikras/redux-form).
---
## [Live Demo](http://zmitry.github.io/redux-form-antd) :eyes:
## Installation
Using [npm](https://www.npmjs.org/):
```bash
$ npm install --save redux-form-antd
```
## Available Components
- Select
- Radio Buttons
- DatePicker
- MonthPicker
- NumberField
- TextField
- Switch
## Usage
Rather than import your component class from `antd`, import it from `redux-form-antd`
and then pass the component class directly to the `component` prop of `Field`.
```js
import { reduxForm, Field } from 'redux-form'
import {
SelectField,
TextField,
} from 'redux-form-antd'
class MyForm extends Component {
render() {
return (
)
}
}
// Decorate with redux-form
MyForm = reduxForm({
form: 'myForm'
})(MyForm)
export default MyForm
```
or you can check stories code [click](https://github.com/zhDmitry/redux-form-antd/blob/master/stories/TextInput.js).
## Instance API
#### `getRenderedComponent()`
Returns a reference to the UI component that has been rendered. This is useful for
calling instance methods on the UI components. For example, if you wanted to focus on
the `username` element when your form mounts, you could do:
```js
componentWillMount() {
this.refs.firstField
.getRenderedComponent()
.focus()
}
```
as long as you specified a `ref` and `withRef` on your `Field` component.
```js
render() {
return (
...
(this.textField = r)}/>
...
)
}
```
## Custom component wrapper
You can use `createComponent` and `customMap` functions to wrap your custom component.
Usage example:
```js
import { createComponent, customMap } from 'redux-form-antd';
import { InputPasswordViewableComponent } from './components/InputPasswordViewableComponent'; // Your custom component
function mapFunction(mapProps, { input: { onChange } }) {
return {
...mapProps,
onChange: event => onChange(event.nativeEvent.target.value)
};
}
const textFieldMap = customMap(mapFunction);
export const InputPasswordViewable = createComponent(InputPasswordViewableComponent, textFieldMap);
```
* `createComponent` creates FormItem wrapper and attaches validate status handler.
* `customMap` maps redux-form [Field props](https://redux-form.com/7.2.3/docs/api/field.md/#props)
to ant.design [form fields props](https://ant.design/components/form/#components-form-demo-validate-static).
You can omit customMap's attribute, in such case default mapping will be applied.
If you specify a map function, then it should return an object with required
properties for ant's FormItem and your component. The signature of map function
is `(mapProps, props) => ({...mapProps})`, where `mapProps` - default mapping
properties, `props` - redux-form's Field properties.
---
inspired by redux-form-material-ui by [erikras](https://github.com/erikras/redux-form-material-ui)