Spoiler

Hide long sections of content under spoiler
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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
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.
import { Spoiler } from '@mantine/core';


function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide">
      {/* Content here */}
    </Spoiler>
  );
}

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
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.
import { Spoiler } from '@mantine/core';


function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide" transitionDuration={0}>
      {/* Content here */}
    </Spoiler>
  );
}

Get control ref

import { useRef } from 'react';
import { Spoiler } from '@mantine/core';


function Demo() {
  const spoilerControlRef = useRef<HTMLButtonElement>(null);
  return <Spoiler controlRef={spoilerControlRef} />;
}
Go back
Kbd – @mantine/core
Up next
ThemeIcon – @mantine/core

Spoiler component props

NameTypeDescription
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

NameStatic selectorDescription
root.mantine-Spoiler-rootRoot element
content.mantine-Spoiler-contentContent wrapper
control.mantine-Spoiler-controlHide/show control
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter