Skip to content

Instantly share code, notes, and snippets.

@karol-majewski
Last active May 13, 2022 22:18
  • Star 9 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save karol-majewski/befaf05af73c7cb3248b4e084ae5df71 to your computer and use it in GitHub Desktop.
Generic React components in TypeScript
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,
)
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>
);
}
}
@karol-majewski
Copy link
Author

If you wish, you can provide the type argument explicitly inside angle brackets:

-  <List>
+  <List<number>
     items={[1, 2, 3]}
     renderItem={item => <li key={item}>{item.toPrecision(3)}</li>}
     wrapper={({ children }) => <ul>{children}</ul>}
   />,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment