redux-form-react-submitbutton v3.0.3
redux-form-react-submitbutton
A submit button for redux-form
that dynamically changes based on the current redux-form state.
Demo
https://deedmob.github.io/redux-form-react-submitbutton/example/
Installing
yarn add redux-form-react-submitbutton
npm install redux-form-react-submitbutton
Example usage (using default Components provided)
import { FormSubmissionHandler, FormErrorMessage, FormSubmitButton } from 'redux-form-react-submitbutton';
@reduxForm({
form: 'account'
})
class AccountForm extends React.Component {
render(){
<form>
<Field name="email" component={TextInput} />
<FormSubmissionHandler>
<FormSubmitButton /> {/* First Child is the submit button */}
<FormErrorMessage /> {/* Second Child is the error message handler, optional */}
</FormSubmissionHandler>
<br/>
</form>
}
}
Custom Usage (probably what you want, although you can use the provided components as guidelines)
import { FormSubmissionHandler } from 'redux-form-react-submitbutton';
const CustomSubmitButton = ({ invalid, submitting }) => {
if(submitting)
return <SpinnerButton/>
if(invalid)
return <ErrorButton/>
return <NormalButton/>
}
const CustomErrorMessage = ({ syncErrors, error }) => {
if(syncErrors){
return (
<ul>
{Object.keys(this.props.syncErrors).map(key =>
<li key={key}>{key}</li>
)}
</ul>
)
}
if(error)
return error
return null;
}
@reduxForm({
form: 'account'
})
class AccountForm extends React.Component {
render(){
<form>
<Field name="email" component={TextInput} />
<FormSubmissionHandler>
<CustomSubmitButton /> {/* First Child is the submit button */}
<CustomErrorMessage /> {/* Second Child is the error message handler, optional */}
</FormSubmissionHandler>
<br/>
</form>
}
}
Components
import { FormSubmissionHandler, FormErrorMessage, FormSubmitButton, connectReduxFormState } from 'redux-form-react-submitbutton';
FormSubmissionHandler
Expects one or two children
, the first being injectedProps the props: submitting: bool
invalid: bool
. The second is injected the props syncErrors: {[key]: value}
,
error: null | string
.
FormSubmitButton
Injected props:
submitting: bool
invalid: bool
Convenient props: className: 'btn', label: 'Submit',
FormErrorMessage
Injected props:
syncErrors: {[key]: value}
// keys are redux-form Field name unique identifiers, {} on no errors.
error: null | string
connectReduxFormState
is a HOC that when used as :connectReduxFormState(WrappedComponent)
injects the following props to your component:
_reduxForm: _reduxForm
syncErrors: _reduxForm.syncErrors || {},
error: _reduxForm.error,
syncWarnings: _reduxForm.syncWarnings || {},
submitting: _reduxForm.submitting,
pristine: _reduxForm.pristine,
dirty: _reduxForm.dirty,
error: _reduxForm.error,
submitSucceeded: _reduxForm.submitSucceeded,
submitFailed: _reduxForm.submitFailed,
invalid: _reduxForm.invalid
Suggested usage
Import this library and create your own React Component that wraps it, and passes in your configuration options or internationalization library. Then export that Component and use the new Component in all your forms.