Rx-React-Form

Form management Higher order component for react app using rxjs

• Presentation
• Install
• Requirement
• Example

Check the demo

Install

npm i rx-react-form -S

or

yarn add rx-react-form

Presentation

React Higher order component that manage form using rxjs Observable (like in angular2 or 4 whatever)

Requirement

• React
• Rxjs

Example

Simple form

import { rxForm } from 'rx-react-form'

interface Props {
    onSubmit: () => void
    onError?: () => void
    name: string
}

@rxForm<Props>({
    debounce: 1000,
    fields: {
        name: {
            validation: (value) => {
                if (value.length > 0) {
                    return 'name should be defined'
                }
            },
            value: (props) => {
                return props.name
            }
        },
        email: {}
    }
})
class SimpleForm extends React.Component<Props, any> {
    render() {
        return (
            <form>
                <div>
                    <input name="name" placeholder="enter your name" />
                    { !!this.props.name.error &&
                        <span>{ this.props.name.error }</span>
                    }
                </div>
                <div>
                    <input name="email" placeholder="modify your email" />
                </div>
                <div>
                    <button type="submit">Submit form</button>
                </div>
            </form>
        )
    }
}

<SimpleForm name="john snow" onSubmit={...} onError={...} />