Spoiler Provider

The Spoiler Provider provides an overlay that blurs its children. When clicked, the overlay is lifted and the children are revealed. Shift + Click will restore the overlay.

warning

This uses CSS Backdrop Filter. See Browser support and use accordingly.

You can provide fallback styles if the browser does not support Backdrop Filter.

👋 This is a title.

This is a little message.

Hint: This is a useful hint.

const a = 124
function HelloWorld(message) {    console.log(message)}
HelloWorld(message)

Example

A code block as a spoiler.

warning

SpoilerProvider in itself is not responsive to the theme. If you want the text color to be responsive then use Spoiler.

<SpoilerProvider    title={`👋    This is a title.    `}    message="This is a little message."    hint="This is a useful hint.">
``jsconst a = 124
function HelloWorld(message) {    console.log(message)}
HelloWorld(message)``
</SpoilerProvider>

Props

Prop	Type	Default	Required
title	string	none	false
message	string	none	false
hint	string	none	false
style	React.CSSProperties	none	false
textStyle	React.CSSProperties	none	false

title

Title of the spoiler.

message

Message of the spoiler.

hint

A little hint message.

style

Overwrite styles of the blur overlay.

textStyle

Overwrite styles of the text container