https://github.com/andrew4699/react-see-through
Draw attention to the important parts of your website
https://github.com/andrew4699/react-see-through
javascript javascript-library react tutorial-library
Last synced: 5 months ago
JSON representation
Draw attention to the important parts of your website
- Host: GitHub
- URL: https://github.com/andrew4699/react-see-through
- Owner: andrew4699
- License: mit
- Created: 2020-03-25T07:43:16.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-28T00:37:15.000Z (almost 6 years ago)
- Last Synced: 2024-08-09T10:49:46.589Z (almost 2 years ago)
- Topics: javascript, javascript-library, react, tutorial-library
- Language: HTML
- Homepage: https://andrew4699.github.io/react-see-through/
- Size: 13.4 MB
- Stars: 109
- Watchers: 3
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-see-through
## Table of Contents
* [Draw attention to the important parts of your website](#draw-attention-to-the-important-parts-of-your-website)
+ [Example](#example)
+ [How is this different from a Modal?](#how-is-this-different-from-a-modal)
* [Installation](#installation)
* [Importing](#importing)
* [Use Cases](#use-cases)
* [Documentation/Examples](#resources)
* [Future Plans](#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)](https://calsynk.com)**
### 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](https://andrew4699.github.io/react-see-through/)
### [GitHub](https://github.com/andrew4699/react-see-through)
## 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