jaredpalmer/formik

Use React.forwardRef in <Formik>

Open

#2,208 opened on Jan 14, 2020

View on GitHub
 (14 comments) (4 reactions) (0 assignees)TypeScript (2,801 forks)batch import
Component: FormikFocus: TypeScripthelp wanted

Repository metrics

Stars
 (34,255 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

As of 2.1.2, <Formik> now allows for an innerRef prop. However, we should instead use React.forwardRef + React.useImperativeHandle. This is more intuitive and closer to best practices. The problem though, is that <Formik> takes TypeScript generics for Values and I'm not sure how to express this in with forwardRef. AFAICT, you can't because forwardRef returns a constant and constants can't have generics.

Help?!?!

Contributor guide

Research direction
Research how to use React.forwardRef with generic components in TypeScript. Look for patterns in other libraries like Material UI or reach ui. Consider using a helper type or wrapper to forward generics.
Tech stack
typescriptreact
Domain
frontend
Issue type
Refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60