React - Render Props

Render Props React Code

Sources:

• Render Props – React (reactjs.org)
• # (reakit.io)

WARNING

Render props are used in modern React, but aren’t very common. For many cases, they have been replaced by custom Hooks.

title: ## Contents 
style: nestedList # TOC style (nestedList|inlineFirstLevel)
minLevel: 1 # Include headings from the specified level
maxLevel: 4 # Include headings up to the specified level
includeLinks: true # Make headings clickable
debugInConsole: false # Print debug info in Obsidian console

Overview

About

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

See Also: as Prop

Compared to the as prop, render props has the disadvantage of adding more nesting into the code. On the other hand, you have more control over the components and props added.

Code Snippet

• src/components/Example.tsx

import { useCheckboxState } from "@/hooks/useCheckboxState"
import { Checkbox, Button } from "@/components/Elements"
 
function Example() {
  const checkbox = useCheckboxState();
  return (
    <Button {...checkbox}>
      {(props) => (
        <Checkbox {...props} as="div">
          {checkbox.state ? "Happy" : "Sad"}
        </Checkbox>
      )}
    </Button>
  );
}
 

Details

See Also

• Tool - Reakit

• as Prop

• React Code

• React (Tool)

• JavaScript Code

• TypeScript Code

• Development Map of Content

• React Map of Content

• JavaScript Map of Content

• Hyper Text Markup Language (HTML)

• Cascading Style Sheets (CSS)

• Next.js

---

Appendix

Note created on 2024-04-30 and last modified on 2024-04-30.

Backlinks

LIST FROM [[React - Render Props]] AND -"CHANGELOG" AND -"04-RESOURCES/Code/React/React - Render Props"

---

(c) No Clocks, LLC | 2024