Skip to content

Instantly share code, notes, and snippets.

@kuanee
Created October 9, 2017 05:21
Show Gist options
  • Save kuanee/3574503989fbe042b800e357702f2833 to your computer and use it in GitHub Desktop.
Save kuanee/3574503989fbe042b800e357702f2833 to your computer and use it in GitHub Desktop.
Using react-bootstrap with redux-form
import React from 'react';
import { Field } from 'redux-form';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
function FieldGroup({ input, meta, ...rest}) {
const { name, label, help, ...props } = rest;
let validationState;
if (!meta.touched) {
validationState = null;
} else if (meta.valid) {
validationState = 'success';
} else {
validationState = 'error';
}
return (
<FormGroup controlId={input.name} validationState={validationState}>
<ControlLabel>{label}</ControlLabel>
<FormControl
value={input.value}
onChange={input.onChange}
onBlur={input.onBlur}
onDragStart={input.onDragStart}
onDrop={input.onDrop}
onFocus={input.onFocus}
{...props}
/>
{validationState && meta.error && <HelpBlock>{meta.error}</HelpBlock>}
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
// use this the same way as the redux-form Field component
export default function ReduxFieldGroup(props) {
return (
<Field component={FieldGroup} {...props} />
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment