1.0.2 • Published 7 years ago
finput-react v1.0.2
finput-react
A thin React wrapper around the finput component
Usage
You'll need finput as a peerDependency
in your project, alongside react.
From there, simply render the wrapper component.
import FinputReact from 'finput-react';
const render = () => {
<FinputReact
value={...}
onChange={...}
onBlur={...} />
};
export default render;
API
- value - The value of the
finput
. Change this prop to force an update and format of a new value. - options - Options to be passed to
finput
upon its initial creation. - onChange - Event, fired upon key entry. Raised with the raw, unformatted, value.
- onBlur - Event, fired when focus is lost. Raised with the raw, unformatted, value.
Note - Properties not specified above are passed to the underlying <input>
, such as disabled
.
redux-form
If you are using redux-form, then you will notice that the shape of the props passed to a form component is slightly different. This can be addressed by defining a custom proxy component. Here is a full example of rendering a redux form with a finput
component:
import React from 'react';
import { reduxForm, Field } from 'redux-form';
import FinputReact from 'finput-react';
const Wrapper = ({ input: { value, onChange, onBlur}}) =>
<FinputReact value={value} onChange={onChange} onBlur={onBlur} />;
const TheForm = (props) => {
return (
<form>
<h2>My Form</h2>
<Field component={Wrapper} name="amount" />
</form>
);
};
export default reduxForm({
form: 'finputForm',
initialValues: {
amount: '1000'
}
})(TheForm);