Back to selected engineering work

Case study

@mmerlone/mui7-phone-number

A phone number input component for MUI v7+ with auto-formatting, country selection, and full TypeScript support.

@mmerlone/mui7-phone-number component demo showing phone number input with country selector

Role

I designed, implemented, documented, and published this component as the maintainer.

Context

MUI v7 changed its API surface, and phone inputs need to stay compatible with the current major while remaining easy to use.

Constraints

  • Must type-check cleanly under React 19 and TypeScript.
  • Country selection and formatting must not depend on heavy runtime dependencies.
  • The public API must be small and stable across minor versions.

Decisions

  • Built on top of MUI v7 components rather than a custom input primitive.
  • Shipped a self-contained formatting helper instead of bundling a locale data set.
  • Exposed minimal props with sensible defaults to keep the API predictable.

Trade-offs

  • Limiting the API surface means some caller customization requires composition rather than props.
  • Reusing MUI theming means the component does not solve styling outside the MUI ecosystem.

Outcome

A typed, auto-formatting phone input that installs cleanly into MUI v7+ applications and is documented with usage examples.