andrew4699/react-see-through

Draw attention to the important parts of your website

react-see-through

Table of Contents

• Draw attention to the important parts of your website
  • Example
  • How is this different from a Modal?
• Installation
• Importing
• Use Cases
• Documentation/Examples
• Future Plans

Draw attention to the important parts of your website

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

react-see-through's Issues

Style properties on the focussed element/elements

When the style parameter of the Mask is set, the style properties don't go away after it becomes inactive

My Code:
<SeeThrough style={{ "box-shadow": "5px 10px 8px 10px #888888", }} active={this.state.activeSee} onClick={(masked) => !masked && this.setActiveSee(!this.state.activeSee) } >

Attaching screenshots of state active and inactive in order

Expected Behaviour :

Inactive state :