pedronauck/react-adopt — 1.7k★ trên GitHub (TypeScript). :sunglasses: Compose render props components like a pro
Tóm tắt dựng từ metadata GitHub của chính dự án — chưa có bài review TopGit. Trang sẽ tự động cập nhật khi bài review đầy đủ được xuất bản.
VÌ SAO CHƯA CÓ REVIEW
TopGit viết bài đầy đủ cho repo có nhiều sao nhất và được yêu cầu nhiều nhất. Trang này là snapshot trong thời gian chờ — xem README gốc ở tab READ ME.
:sunglasses: React Adopt - Compose render props components like a pro
📜 Table of content
Why
Solution
Demos
Usage
Working with new Context api
Custom render and retrieving props from composed
Mapping props from mapper
Using components on mapper
Leading with multiple params
Typescript support
Inline composition
🧐 Why
Render Props are the new hype of React's ecosystem, that's a fact. So, when you need to use more than one render props component together, this can be boring and generate something called a "render props callback hell", like this:
💡 Solution
Small. 0.7kb minified!
Extremely Simple. Just a method!
React Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper.
📟 Demos
Basic example
Todo App example using React Apollo
Example with new Context API
💻 Usage
Install as project dependency:
$ yarn add react-adopt
Now you can use React Adopt to compose your components. See below for an example using the awesome react-powerplug:
Working with new Context api
One use case that React Adopt can fit perfectly is when you need to use React's new context api that use render props to create some context:
Some components don't use the children prop for render props to work. For cases like this, you can pass a function instead of a jsx element to your mapper. This function will receive a render prop that will be responsible for your render, the props passed on Composed component, and the previous values from each mapper. See an example:
Sometimes, get properties from your mappers can be kind of boring depending on how nested the result from each mapper. To easily avoid deeply nested objects or combine your results, you can map the final results into a single object using the mapProps function as the second parameter.
If you want to use your component directly as mapper value you can do that. Some nice thing here is that all non-react static methods of your components will be hoisting for composed component:
import { React } from 'react'
import { adopt } from 'adopt'
import { Value } from 'react-powerplug'
const Greeter = ({ render, name }) => render(`Hi ${name.value}`)
Greeter.sayHi = (name) => `Hi ${name}`
const Composed = adopt({
name: <Value name="John" />
greet: Greet
})
console.log(Composed.sayHi('John')) // Hi John
const App = () => (
<Composed>
{({ greet, name }) => /* ... */ }
</Composed>
)
Leading with multiple params
Some render props components return multiple arguments in the children function instead of a single one (see a simple example in the new Query and Mutation component from react-apollo). In this case, you can do an arbitrary render with render prop using your map value as a function:
import { adopt } from 'react-adopt'
import { Mutation } from 'react-apollo'
const ADD_TODO = /* ... */
const addTodo = ({ render }) => (
<Mutation mutation={ADD_TODO}>
{/* this is an arbitrary render where you will pass your two arguments into a single one */}
{(mutation, result) => render({ mutation, result })}
</Mutation>
)
const Composed = adopt({
addTodo,
})
const App = () => (
<Composed>
{({ addTodo: { mutation, result } }) => /* ... */}
</Composed>
)
See this demo for a complete explanation about multiple params..
Typescript support
React Adopt has full typescript support when you need to type the composed component:
If you dont care about typings and need something more easy and quick, you can choose to use an inline composition by importing the <Adopt> component and passing your mapper as a prop:
import React from 'react'
import { Adopt } from 'react-adopt'
import { Value } from 'react-powerplug'
const mapper = {
greet: <Value initial="Hi" />,
name: <Value initial="John" />
}
<Adopt mapper={mapper}>
{({ greet, name }) => /* ... */}
</Adopt>
🕺 Contribute
Fork this repository to your own GitHub account and then clone it to your local device
Install dependencies using Yarn: yarn install
Make the necessary changes and ensure that the tests are passing using yarn test
pedronauck/react-adopt thuộc nhóm Frontend trên TopGit, cùng 3 topic GitHub. Trang Trending và Topics liệt kê các repo cùng số sao và cùng ngôn ngữ để so sánh.
Đọc thêm về pedronauck/react-adopt ở đâu?
Trang TopGit này là một snapshot — tab "Readme" hiển thị nguyên văn README của repo (đã bỏ link, giữ ảnh). Repo GitHub ở github.com/pedronauck/react-adopt là nguồn chính thức.
pedronauck/react-adopt có bao nhiêu sao?
pedronauck/react-adopt có 1.7k sao GitHub — tải lại trang để xem số mới nhất, hoặc xem trực tiếp github.com/pedronauck/react-adopt. TopGit phản chiếu số sao của GitHub nhưng không cam kết đến từng phút.
pedronauck/react-adopt có những chủ đề gì?
GitHub topics của pedronauck/react-adopt: "compose", "react", "render-props". TopGit xếp repo vào nhóm Frontend.
pedronauck/react-adopt có phải mã nguồn mở không?
Có — pedronauck/react-adopt phát hành theo license MIT, nghĩa là mã nguồn mở để đọc, fork và (tùy license) tái sử dụng. Mã: github.com/pedronauck/react-adopt.
pedronauck/react-adopt có website riêng không?
TopGit chưa ghi nhận URL trang chủ cho pedronauck/react-adopt. Phần README ở tab phía trên thường có link demo, hoặc xem mô tả GitHub của repo.
pedronauck/react-adopt còn đang phát triển không?
Commit gần nhất trên pedronauck/react-adopt là 3.8 năm trước (theo timestamp GitHub). Repo có 56 fork — một chỉ báo về mức độ quan tâm của cộng đồng.
Đọc đầy đủ README ở tab phía trên.
Chưa chắc react-adopt có hợp với bạn?
Để ChatGPT, Claude hoặc Perplexity tìm hiểu giúp — bấm bên dưới và xem AI nói gì về react-adopt.
/react-adopt
