Skip to content

feat: Allow passing custom component to flags prop #203#208

Open
simonnilsson wants to merge 1 commit intoybrusentsov:developmentfrom
simonnilsson:master
Open

feat: Allow passing custom component to flags prop #203#208
simonnilsson wants to merge 1 commit intoybrusentsov:developmentfrom
simonnilsson:master

Conversation

@simonnilsson
Copy link
Copy Markdown

What has been done

A custom component for rendering flags can now be passed to flags prop instead of list of image URLs enabling support for more use cases. Change is not breaking.

More detailed use case described in #203

Checklist before requesting a review

  • I have read the contributing doc before submitting this PR.
  • Commit titles correspond to the convention.
  • I have performed a self-review of my code.
  • Tests for the changes have been added (for bug fixes/features).
  • Docs have been added / updated (for bug fixes / features).

Example

const CustomFlag = ({
  iso2,
  style,
  className,
}}) => {
  return (
    <img
      src={`/flags/${iso2}.svg`}
      style={{ ...style, width: '24px', height: '24px' }}
      className={className}
    />
  );
};

<PhoneInput flags={CustomFlag} />

@vercel
Copy link
Copy Markdown

vercel Bot commented Sep 6, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-international-phone-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 6, 2024 0:31am
react-international-phone-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 6, 2024 0:31am

@simonnilsson
Copy link
Copy Markdown
Author

Hi @ybrusentsov, can this be merged please?

@ybrusentsov ybrusentsov force-pushed the development branch 2 times, most recently from 1e556e4 to 1f75150 Compare January 15, 2026 22:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant