https://github.com/ohansemmanuel/polymorphic-react-component
Companion repo for my build a polymorphic React component class
https://github.com/ohansemmanuel/polymorphic-react-component
react reactjs typescript
Last synced: 20 days ago
JSON representation
Companion repo for my build a polymorphic React component class
- Host: GitHub
- URL: https://github.com/ohansemmanuel/polymorphic-react-component
- Owner: ohansemmanuel
- Created: 2022-03-06T05:20:43.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-03T13:07:35.000Z (almost 2 years ago)
- Last Synced: 2025-04-01T20:16:37.746Z (28 days ago)
- Topics: react, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 780 KB
- Stars: 274
- Watchers: 5
- Forks: 40
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> **Polymorphic**: occurring in several different forms, in particular with reference to species or genetic variation...
# How to read the code
Read the implementation snippets from `01` to `06`
[01: A basic polymorphic component implementation](/01.tsx)
[02: Handling relevant component props](/02.tsx):
[03: Providing a default generic type](/03.tsx):
[04: Handling unique component props](/04.tsx)
[05: Building a reusable polymorphic type utility](/05.tsx)
[06: Handling polymorphic components with Ref](/06.tsx)
# Relevant Links
- [Live workshop details](https://devcher.com/class/build-strongly-typed-polymorphic-components-with-react-and-typescript-UWwzxjSxrh)
- Watch me teach this [course on Udemy](https://www.udemy.com/course/build-polymorphic-components-with-react-and-typescript/?referralCode=DF6B523A0C852F2044DC)
- [Presentation](https://excalidraw.com/#json=3mAFa-9SfI53dtQ6q5ykA,frb3BKbw-Zivudv-kixuVQ) on Excalidraw (open in incognito to not override your current drawings )
- [use cases (PDF)](/use-cases.pdf)
## Read more
- Polymorphic components in the wild: [Chakra UI](https://chakra-ui.com/docs/components/layout/box#as-prop) and [Material UI](https://mui.com/guides/composition/#component-prop)
- JSX: [Choosing type at runtime](https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime)
- Typescript [Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html)
- Typescript Generics and arrow functions:
- [What's the syntax for generics in TS?](https://stackoverflow.com/questions/32308370/what-is-the-syntax-for-typescript-arrow-functions-with-generics?)
- [TS Github issue](https://github.com/Microsoft/TypeScript/issues/4922)
- [Why color appears as HTML attribute on a div?](https://stackoverflow.com/questions/67142430/why-color-appears-as-html-attribute-on-a-div)
- React Ref: [Forwarding Refs](https://reactjs.org/docs/forwarding-refs.html)
## Download the accompanying ebook and receive my 5-day typescript secrets newsletter
[Download ebook here](https://www.ohansemmanuel.com/books/how-to-build-strongly-typed-polymorphic-react-components).
You'll automatically receive my 5-day newsletter to get you thinking and writing Typescript like a pro 🕺