Spoiler required props: hideLabel and showLabel
The hideLabel and showLabel props are required for the Spoiler component. They are used as the spoiler toggle button label in the corresponding state.
spoiler/props
7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Spoiler expanded and onExpandedChange props
To control the expanded state, use the expanded and onExpandedChange props. The expanded prop does not have any effect on spoiler visuals if the content height is less than the given maxHeight.
Spoiler transitionDuration prop
Control the transition duration by setting the transitionDuration prop, which corresponds to the CSS transition-duration property in milliseconds. Set transitionDuration to 0 to disable animations.
Spoiler controlRef prop
The controlRef prop accepts a React ref of type HTMLButtonElement to get a reference to the toggle button element.
Spoiler controlled state example
Example code showing how to control expanded state with useState hook: ```tsx import { useState } from 'react'; import { Spoiler } from '@mantine/core'; function Demo() { const [expanded, setExpanded] = useState(false); return ( <Spoiler showLabel="Show more" hideLabel="Hide details" expanded={expanded} onExpandedChange={setExpanded} > {/* Spoiler content */} </Spoiler> ); } ```
Spoiler onExpandedChange subscription example
Example code showing how to subscribe to expanded state changes: ```tsx import { Spoiler } from '@mantine/core'; function Demo() { return ( <Spoiler showLabel="Show more" hideLabel="Hide details" onExpandedChange={(expanded) => console.log(expanded)} > {/* Spoiler content */} </Spoiler> ); } ```
Spoiler controlRef ref example
Example code showing how to get a ref to the toggle button: ```tsx import { useRef } from 'react'; import { Spoiler } from '@mantine/core'; function Demo() { const spoilerControlRef = useRef<HTMLButtonElement>(null); return ( <Spoiler controlRef={spoilerControlRef} hideLabel="Hide" showLabel="Show" /> ); } ```