Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suchipi/react-send
📨 Separate your component's markup from their position in the render tree
https://github.com/suchipi/react-send
Last synced: about 2 months ago
JSON representation
📨 Separate your component's markup from their position in the render tree
- Host: GitHub
- URL: https://github.com/suchipi/react-send
- Owner: suchipi
- License: mit
- Created: 2018-09-01T18:42:04.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-01T19:30:53.000Z (about 6 years ago)
- Last Synced: 2024-07-06T12:20:47.786Z (3 months ago)
- Language: JavaScript
- Size: 54.7 KB
- Stars: 70
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-send
README
# `react-send` 📨
`react-send` is a library that creates components which send their children somewhere else in your render tree.
## API
`react-send` exports a function called `send` which is used to create a pair of component classes- an input and an output:
```js
const { Input, Output } = send();
// Input and Output are component classes
```
Any children you pass into `Input` will get rendered as the children of `Output`.
```js
const { Input, Output } = send();
const Example = () => (
inside input
);
// Renders:
//
// inside input
//
//
//
```
These components will show up in the React DevTools as `Send.Input` and `Send.Output`. You can pass an optional string to `send` to customize this:
```js
const { Input, Output } = send("AppBarContents");
// Input and Output now appear in React DevTools as
// AppBarContents.Input and AppBarContents.Output, respectively.
```
## Example
In this example, we use `react-send` to create two components named `Title.Input` and `Title.Output`. The outer `App` component renders `Title.Output`, and each page the app can render renders a `Title.Input`. Therefore, each page determines which title to render, but `App` determines where to put the title in the DOM.
```js
import send from "react-send";
const Title = send("Title");
// Title is now an object with two component classes on it: `Input` and `Output`.
// The children passed into `Input` will be rendered as children of `Output`.
class App extends React.Component {
state = {
currentPage: "index",
};
render() {
const { currentPage } = this.state;
return (
<>
{currentPage === "index" ? (
) : currentPage === "users" ? (
) : null}
>
);
}
}
class IndexPage extends React.Component {
render() {
return (
<>
Home
This is the index page
>
);
}
}
class UsersPage extends React.Component {
render() {
return (
<>
Users
This is the users page
>
);
}
}
```
## License
MIT