https://github.com/dazulu/react-spoiler-tag

React component to cover text you do not want visible until user interaction
https://github.com/dazulu/react-spoiler-tag

Last synced: 19 days ago
JSON representation

React component to cover text you do not want visible until user interaction

• Host: GitHub
• URL: https://github.com/dazulu/react-spoiler-tag
• Owner: dazulu
• Created: 2020-09-14T13:13:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-10-09T16:06:18.000Z (about 3 years ago)
• Last Synced: 2024-12-09T14:57:33.401Z (28 days ago)
• Language: TypeScript
• Size: 230 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        









Lightweight, accessible React component to hide text until the user clicks.




  





  

  

  

  



## Install

```bash

npm install react-spoiler-tag

```

or

```bash

yarn add react-spoiler-tag

```

## Basic Usage

```jsx

import { Spoiler } from 'react-spoiler-tag'

import 'react-spoiler-tag/dist/index.css'

const SomeComponent = () => {

  return 

}

```

### With prop

```html

```

### With children

Passing in children is supported, **however**, as of now only with lines of text in mind. Wrapping complex entities like a card, list, image, table, etc. will yield undesired results.

```html

Super secret link!

```

## Props

```html

```

`text` - (Optional) Text to be covered by the spolier effect - ``

`color` - (Optional) CSS _color_ value for the text. Default: _"inherit"_ - ``

`hiddenColor` - (Optional) CSS _background-color_ value for the hidden background color. Default: _"#444"_ - ``

`revealedColor` - (Optional) CSS _background-color_ value for the revealed background color. Default: _"#e2e2e2"_ - ``

`ariaLabelShowText` - (Optional) Text for screenreaders when component is focused in hidden state. Default: _"To reveal spoiler text click here."_ - ``

`ariaLabelHideText` - (Optional) Text for screenreaders when component is focused in revealed state. Default: _"To hide spoiler text again click here."_ - ``

## Note on accessibility (a11y)

It is highly recommended to make use of the props `ariaLabelShowText` and `ariaLabelHideText`, if you are serving this component in other languages, as the default text for them is in English.

## Roadmap

- Support complex children content

## License

MIT © [dazulu](https://github.com/dazulu)