Spoiler
Hide long sections of content under spoiler
Import
Source
Docs
Package
Usage
Use Spoiler to hide long section of content.
Pass maxHeight
prop to control point at which content will be hidden under spoiler and control to show/hide extra appears.
If content height is less than maxHeight
spoiler will just render children.
Props hideLabel
and showLabel
are required – they are used as spoiler toggle button label in corresponding state.
![We Butter the Bread with Butter](https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Rock_in_caputh-WBTBWB-47.jpg/600px-Rock_in_caputh-WBTBWB-47.jpg)
We Butter the Bread with Butter was founded in 2007 by Marcel Neumann, who was originally guitarist for Martin Kesici's band, and Tobias Schultka. The band was originally meant as a joke, but progressed into being a more serious musical duo. The name for the band has no particular meaning, although its origins were suggested from when the two original members were driving in a car operated by Marcel Neumann and an accident almost occurred. Neumann found Schultka "so funny that he briefly lost control of the vehicle." Many of their songs from this point were covers of German folk tales and nursery rhymes.
Transition duration
Control transition duration by setting transitionDuration
prop (transition-duration CSS property in ms).
To disable animations, set prop to 0:
![We Butter the Bread with Butter](https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Rock_in_caputh-WBTBWB-47.jpg/600px-Rock_in_caputh-WBTBWB-47.jpg)
We Butter the Bread with Butter was founded in 2007 by Marcel Neumann, who was originally guitarist for Martin Kesici's band, and Tobias Schultka. The band was originally meant as a joke, but progressed into being a more serious musical duo. The name for the band has no particular meaning, although its origins were suggested from when the two original members were driving in a car operated by Marcel Neumann and an accident almost occurred. Neumann found Schultka "so funny that he briefly lost control of the vehicle." Many of their songs from this point were covers of German folk tales and nursery rhymes.
Get control ref
Spoiler component props
Name | Type | Description |
---|---|---|
controlRef | ForwardedRef<HTMLButtonElement> | Get ref of spoiler toggle button |
hideLabel * | ReactNode | Label for close spoiler action |
initialState | boolean | Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state will be updated on mount |
maxHeight * | number | Max height of visible content, when this point is reached spoiler appears |
showLabel * | ReactNode | Label for open spoiler action |
transitionDuration | number | Spoiler reveal transition duration in ms, 0 or null to turn off animation |
Spoiler component Styles API
Name | Static selector | Description |
---|---|---|
root | .mantine-Spoiler-root | Root element |
content | .mantine-Spoiler-content | Content wrapper |
control | .mantine-Spoiler-control | Hide/show control |