- Draw attention to the important parts of your website
- Installation
- Importing
- Use Cases
- Documentation/Examples
- Future Plans
* react-see-through is used here to create the black mask above everything except the tutorial (source)
The black mask appears around existing elements on the page.
npm install --save react-see-through
or
yarn add react-see-through
To use the react-see-through component, you want to do:
import { SeeThrough } from 'react-see-through';
after installing.
- Slack, Discord, and many other popular services use this type of effect for tutorials
- This lets them direct users' attention to particular elements being introduced.
- Allow interacting (click, hover, etc...) with the unmasked area
- Make only certain areas interactable? - wrapper
- Typescript definitions
- Fade-out animation
- Option to add padding
- Better documentation styling