0PricingLogin
React Academy · Lesson

Building an Imperative Component API

Design a focus-managed input, a modal with open/close methods, and other imperative component patterns.

Designing a FocusableInput

Start by deciding the contract: a FocusableInput might expose focus, blur, and getValue. Wrap it in forwardRef, keep an internal ref to the real input, and return those three methods from useImperativeHandle.

Each method delegates to the underlying input, so the parent gets exactly the operations it needs without touching the raw element.

A VideoPlayer Exposing play/pause/seekTo

A media component benefits greatly from an imperative API. A VideoPlayer can expose play, pause, and seekTo, each delegating to the native HTMLVideoElement methods on an internal video ref.

seekTo accepts a time in seconds and sets currentTime, giving parents precise control over playback that would be awkward to drive purely through props.

All lessons in this course

  1. forwardRef: Exposing DOM Refs to Parents
  2. useImperativeHandle: Custom Instance Values
  3. Building an Imperative Component API
  4. When to Use Imperative vs Declarative APIs
← Back to React Academy