new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

polymorphic/renderoroot

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

renderRoot prop as alternative to component

renderRoot is an alternative to the component prop that accepts a function returning a React element. It is useful when the component prop cannot be used, such as when passing a generic component that accepts type parameters. The props argument must be spread into the root element, otherwise there will be no styles and the component might not be accessible.

renderRoot example with Next.js typed Link

Example of using renderRoot prop with typed Next.js Link: ```tsx import Link from 'next/link'; import { Button } from '@mantine/core'; function Demo() { return ( <Button renderRoot={(props) => <Link href="/hello" {...props} />}> Typed Next link button </Button> ); } ```

renderRoot example with react-router NavLink

Example of using renderRoot prop with react-router NavLink to conditionally add active class: ```tsx import cx from 'clsx'; import { NavLink } from 'react-router-dom'; import { Button } from '@mantine/core'; function Demo() { return ( <Button renderRoot={({ className, ...others }) => ( <NavLink className={({ isActive }) => cx(className, { 'active-class': isActive }) } {...others} /> )} > React router NavLink </Button> ); } ```

renderRoot example with component prop

Example of using renderRoot prop as alternative to component prop with the same result: ```tsx import { Button } from '@mantine/core'; function Demo() { return ( <Button renderRoot={(props) => ( <a href="https://mantine.dev/" target="_blank" {...props} /> )} > Mantine website </Button> ); } ```

Give your agent this brain