Skip to content

andrew4699/react-see-through

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-see-through

Table of Contents

Draw attention to the important parts of your website

Example

Example * react-see-through is used here to create the black mask above everything except the tutorial (source)

How is this different from a Modal?

The black mask appears around existing elements on the page.

Installation

npm install --save react-see-through

or

yarn add react-see-through

Importing

To use the react-see-through component, you want to do:

import { SeeThrough } from 'react-see-through';

after installing.

Use Cases

  • 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.

Resources

Documentation/Examples

GitHub

Future Plans

  • 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

Releases

No releases published

Packages

No packages published