ReduxForm Integration

In the past, support for the third-party form state management library ReduxForm was built into ink form components. Over time, teams started using other form state management libraries - React Final Form, Formik, etc, and providing explicit support to all of these would become impractical. As such, this page will provide guidance on how to use New* ink components with ReduxForm specifically, but these guidelines might also prove useful for other state management libraries.

For detailed, correct information on how to use ink components with ReduxForm, refer to the documentation, in particular for the Field component.

Example using NewInput with a phone mask inside ReduxForm:

import { NewInput } from '@carta/ink';
import { Field } from 'redux-form';

// Outside your render() method
const RFNewInput = (props) => (
    <NewInput {...props} {...props.input} />
)

// Inside your render() method
<Field name="myField" component={RFNewInput} mask="phone" />

Implementations of ReduxForm that use arrow functions as the component prop in the ReduxForm Field component are not supported by ReduxForm documentation. This causes the component to re-render in every interaction and makes it unusable. These implementations were done with Checkbox, Radio and Select in Carta-Web, where the user doesn't notice when they lose focus on the element.

Don't do this:

import { NewInput } from "@carta/ink";
import { Field } from "redux-form";

// Inside your render() method
<Field name="myField" component={(props) => <NewInput {...props} {...props.input} />} />