Selector for react-final-form.
$ npm install react-final-form-selector
or
$ yarn add react-final-form-selector
Now you can use selector like redux selector (reselect is a plus).
Interface:
interface User {
id: nuber;
name: string;
}
interface Form {
users: User[];
}
Component:
export { useFormSelector } from 'react-final-form-selector';
import { FormState } from 'final-form';
import selector from './selector';
interface Props {
idx: number;
}
const Component: React.FC<IProps> = (props) => {
const { user } = useFormSelector((state: FormState<Form>) => selector(state, props));
return (
<p>{user.name}</p>
);
};
Selector:
import { createSelector } from 'reselect'; // optional
const getUser = (state: FormState<Form>, { idx }: { idx: number; }) => state.values.users[idx];
export default createSelector([getUser], (user) => ({
user,
}));