<SeeThrough>Props Importing Basic usage Enable user interaction (click/hover/...) with SeeThrough elements Absolute/fixed elements Multiple active SeeThroughs at once How do interactive SeeThroughs work?<SeeThroughController>

SeeThrough

Props

children

node

The element(s) that that you want to be see-through.

active

bool

false

Whether or not this <SeeThrough> is active. Currently, only one active SeeThrough at a time is supported, but it can have multiple children.

onClick

func

() => {}

A function to call when the see-through component is clicked. This only works when the component is “active”. The function is passed the following arguments:

masked - a boolean indicating whether the click was on the masked (black) or unmasked (non-black) area

className

string

[Empty string]

<SeeThrough> creates a <div> wrapper around all the contained elements. This could break layouts that require very particular element hierarchies, like flex containers. “className” allows you to style that <div> in-case adding it breaks your layout.

There is currently no way to avoid having the <div> container due to limitations of React refs.

style

any

{}

<SeeThrough> creates a <div> wrapper around all the contained elements. This could break layouts that require very particular element hierarchies, like flex containers. “style” allows you to style that <div> in-case adding it breaks your layout.

There is currently no way to avoid having the <div> container due to limitations of React refs.

maskColor

string

"rgba(0, 0, 0, 0.4)"

The color of the mask. If you’re using a SeeThroughController, you should pass this to that instead. Supports all canvas fillStyle formats, e.g. “#AAA333”, “red”, “rgba(10, 12, 8, 0.2)”, …

childSearchDepth

number

SeeThrough searches children in the DOM tree to determine the area to reveal. Suppose your DOM looks like this:

SeeThrough -> A -> B -> C -> D

A depth of 3 means that the revealed areas will be A, B, and C.

Normally a depth of 1 is enough because parents will be as big as their children. However, absolute/fixed children don’t contribute to the parent’s size so the depth needs to be large enough that the search sees them.

childTagsToSkip

Array<string>

['svg']

SeeThrough searches children in the DOM tree to determine the area to reveal (more details under “childSearchDepth”). This is a list of element tags that won’t be traversed further down. Note that the tags themselves will still be considered.

interactive

bool

false

Whether or not you can interact (click/hover/etc) with elements in an active SeeThrough. You can always interact with elements in an inactive SeeThrough.

Note that if interactive, this SeeThrough’s onClick method will only be called if the black masked area is clicked.

Importing

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

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

after installing.

Basic usage

Clicking on the masked (black) area stops the see-through effect.

Some text

Other text

() => {
  const [active, setActive] = useState(false)
  return (
    <div style={{ padding: '60px' }}>
      <button onClick={() => setActive(true)}>Activate</button>
      <SeeThrough
        active={active}
        onClick={masked => masked && setActive(false)}
      >
        <div>Some text</div>
        <div>Other text</div>
      </SeeThrough>
    </div>
  )
}

() => {
  const [active, setActive] = useState(false)
  return (
    <div style={{ padding: '60px' }}>
      <button onClick={() => setActive(true)}>Activate</button>
      <SeeThrough
        active={active}
        onClick={masked => masked && setActive(false)}
      >
        <div>Some text</div>
        <div>Other text</div>
      </SeeThrough>
    </div>
  )
}

Enable user interaction (click/hover/...) with SeeThrough elements

NOTE: This gets slower as your page width/height and the number of active SeeThroughs at once increase. Read below about how interactivity works to understand why.

It should be fast enough in most cases but you should test it and determine if it's fast enough for your use case.

Some text

Other text

() => {
  const [active, setActive] = useState(false)
  return (
    <div style={{ padding: '60px' }}>
      <button onClick={() => setActive(true)}>Activate</button>
      <SeeThrough interactive active={active}>
        <div>Some text</div>
        <div>Other text</div>
        {active && <button onClick={() => setActive(false)}>Close</button>}
      </SeeThrough>
    </div>
  )
}

() => {
  const [active, setActive] = useState(false)
  return (
    <div style={{ padding: '60px' }}>
      <button onClick={() => setActive(true)}>Activate</button>
      <SeeThrough interactive active={active}>
        <div>Some text</div>
        <div>Other text</div>
        {active && <button onClick={() => setActive(false)}>Close</button>}
      </SeeThrough>
    </div>
  )
}

Absolute/fixed elements

Uses childSearchDepth to explicitly search more children. See the props documentation at the top for more info.

NOTE: If you don't know what depth to use, just use `Number.POSITIVE_INFINITY` and only lower it if things get slow.

My cool content

Multiple active SeeThroughs at once

Look at SeeThroughController for examples on multiple active SeeThroughs

How do interactive SeeThroughs work?

For non-interactive SeeThroughs a canvas is overlayed on the whole page and painted transparent in the locations of your SeeThrough elements. This can't be done for interactive SeeThroughs because having a canvas over everything prevents interaction. Thus, the way interactivity works is by creating several boxes around all of your SeeThrough elements. Computing this set of boxes is computationally expensive, scaling with page size and the number of active SeeThrough elements.

SeeThrough

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Props