Last active
May 13, 2022 22:18
-
-
Save karol-majewski/befaf05af73c7cb3248b4e084ae5df71 to your computer and use it in GitHub Desktop.
Generic React components in TypeScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as ReactDOM from 'react-dom'; | |
import { List } from '../components'; | |
ReactDOM.render( | |
<List | |
items={[1, 2, 3]} | |
renderItem={item => <li key={item}>{item.toPrecision(3)}</li>} | |
wrapper={({ children }) => <ul>{children}</ul>} | |
/>, | |
document.body, | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as React from 'react'; | |
interface Props<T> { | |
items: T[]; | |
renderItem: (item: T) => React.ReactNode; | |
wrapper: React.ComponentType; | |
} | |
class List<T> extends React.PureComponent<Props<T>> { | |
static defaultProps = { | |
wrapper: React.Fragment, | |
}; | |
render(): React.ReactNode { | |
const { items, renderItem, wrapper: Wrapper } = this.props; | |
return ( | |
<Wrapper> | |
{items.map(renderItem)} | |
</Wrapper> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you wish, you can provide the type argument explicitly inside angle brackets: