React - as Prop

as Prop

Sources:

• # (reakit.io)

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

TIP

Utilize the as component property to compose components in React. This way you can change the underlying element of a composed component or combine it with another component (i.e. render a checkbox component as a button element).

NOTE

The topmost component (i.e. checkbox in the example above) will take precedence if there is a conflict between props.

Code Snippet

• src/components/Example.tsx

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

Details

See Also

• JavaScript Map of Content
• JavaScript Code
• Hyper Text Markup Language (HTML)
• Cascading Style Sheets (CSS)
• React.js
• Next.js

---

Appendix

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

Backlinks

LIST FROM [[React - as Prop]] AND -"CHANGELOG" AND -"04-RESOURCES/Code/React/React - as Prop"

---

(c) No Clocks, LLC | 2024