https://github.com/xat/react-component-composition-cheatsheet
React component composition cheatsheet
https://github.com/xat/react-component-composition-cheatsheet
Last synced: about 2 months ago
JSON representation
React component composition cheatsheet
- Host: GitHub
- URL: https://github.com/xat/react-component-composition-cheatsheet
- Owner: xat
- Created: 2017-03-19T14:38:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-20T02:27:11.000Z (over 8 years ago)
- Last Synced: 2024-12-17T01:34:05.245Z (about 1 year ago)
- Size: 1000 Bytes
- Stars: 185
- Watchers: 7
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome_frontend_development_resources - react-component-composition-cheatsheet - React component composition cheatsheet. (Cheatsheet / React Components)
- awesome - react-component-composition-cheatsheet - React component composition cheatsheet. (Cheatsheet / React Components)
README
# React component composition cheatsheet
This is a small list of common techniques used in React
to compose and enhance components. Feel free to create
Pull Requests with further techniques or fixes.
### Basic containment
Elements can be passed as children into components.
```jsx
const Layout = ({ children, theme }) => (
{children}
);
const Content = () => (
Some fancy content
);
ReactDOM.render(
, containerEl);
```
### Containment with multiple slots using children
Children are not limited to being elements. You can pass basically anything,
including plain objects.
```jsx
const Layout = ({ children, theme }) => (
{children.header}
{children.content}
{children.footer}
);
const Header = () => (
Header title
);
const Footer = () => (
footer note
);
const Content = () => (
Some fancy content
);
ReactDOM.render(
{{
header: ,
content: ,
footer:
}}
, containerEl);
```
### Containment with multiple slots using props
Elements can also be passed in using props.
```jsx
const Layout = ({ header, content, footer, theme }) => (
{header}
{content}
{footer}
);
const Header = () => (
Header title
);
const Footer = () => (
footer note
);
const Content = () => (
Some fancy content
);
ReactDOM.render(
}
content={}
footer={}
/>
, containerEl);
```
### Enhancing contained elements
It's possible to enhance certain elements with additional props using
`React.cloneElement`.
```jsx
const Layout = ({ children, theme }) => (
{React.cloneElement(children, { theme })}
);
const Content = ({ theme }) => (
Currently using this theme: {theme}
);
ReactDOM.render(
, containerEl);
```
### Passing components as props
Like elements, you can also pass components in using props.
```jsx
const Layout = ({ children, contentComponent, theme }) => {
const ContentComponent = contentComponent;
return (
);
};
const Content = ({ theme }) => (
Currently using this theme: {theme}
);
ReactDOM.render(
, containerEl);
```
### Higher Order Components (HOC)
Higher Order Components are functions which get a component passed in as argument and
return a new component.
```jsx
function createComponentWithDefaultProps(WrappedComponent, defaultProps) {
return (props) => (
);
}
const Layout = ({ children, theme }) => (
{children}
);
const DarkLayout = createComponentWithDefaultProps(Layout, { theme: 'dark' });
ReactDOM.render(
Some content
, containerEl);
```
### Using functions as children
Since children can be anything, they can also be functions.
```jsx
class FetchTheme extends React.Component {
constructor() {
super();
this.state = {
theme: null
};
}
componentDidMount() {
fetch('/api/currentTheme')
.then((res) => res.text())
.then(((theme) => {
this.setState({ theme });
}));
}
render() {
const { children } = this.props;
const { theme } = this.state;
return theme ? children(theme) : null;
}
}
const Layout = ({ children, theme }) => (
{children}
);
ReactDOM.render(
{
(theme) => (
Some content
)
}
, containerEl);
```
## License
Copyright (c) 2017 Simon Kusterer
Licensed under the MIT license.