npmpackage.info

Gathering detailed insights and metrics for @reactour/mask

Other packages similar to @reactour/mask

@owenjs/lets-tour

0.5.1

Dead simple React element Walk-Through package. Powered by [Popper.js](https://popper.js.org/) and [@reactour/mask](https://github.com/elrumordelaluz/reactour/tree/main/packages/mask)

Gathering detailed insights and metrics for @reactour/mask

@reactour/mask - 1.1.0 | npmpackage.info

@reactour/mask

Tourist Guide into your React Components

1.1.0

3,951

MIT

TypeScript

17.31 kB

5.1

Installations

npm install @reactour/mask

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.12.1

NPM Version

8.19.2 Pull Requests

Open

9

Total

157

Closed

61

Merged

87

Issues

Open

71

Total

479

Closed

408

Releases

Leaving emotions…

3.0.0

Updated on Aug 12, 2022

Adding new step props: observables + highlight selectors

v1.18.0

Updated on Jun 15, 2020

disableFocusLock + roundedMask

v1.17.0

Updated on Apr 07, 2020

Custom Helper

v1.12.0

Updated on Jan 18, 2019

Add close function into step

v1.11.0

Updated on Dec 19, 2018

v1.10.0

Updated on Dec 18, 2018

View All 13 releases

Languages

TypeScript

MDX

JavaScript

CSS

TypeScript (66.41%)

MDX (16.74%)

JavaScript (14.65%)

CSS (2.2%)

Developer

elrumordelaluz

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

3,951 Stars

777 Commits

355 Forks

22 Watchers

4 Branches

47 Contributors

Updated on Jul 08, 2025

Maintainers

View All 47 Contributors

Package Meta Information

Latest Version

1.1.0

Package Id

@reactour/mask@1.1.0

Unpacked Size

17.31 kB

Size

4.68 kB

File Count

NPM Version

8.19.2

Node Version

18.12.1

Published on

Apr 27, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

An SVG mask that cover all the window contents except the one specified by certain position and sizes values

Install

1npm i -S @reactour/mask
2# or
3yarn add @reactour/mask

Usage

1import { Mask } from '@reactour/mask'
2
3function App() {
4  const sizes = {
5    width: 100,
6    height: 100,
7    top: 100,
8    left: 100,
9  }
10
11  return (
12    <>
13      {/* ... */}
14      <Mask sizes={sizes} />
15    </>
16  )
17}

`Mask`

`sizes: RectResult`

Type details

1type RectResult = {
2  width: number
3  height: number
4  top: number
5  left: number
6  bottom?: number
7  right?: number
8}

Object containing size and position informations of where to position the Mask

`className?: string`

Class to apply to the Mask wrapper

`highlightedAreaClassName?: string`

Class to apply to the Highlighted area rect

`padding?: number | number[]`

Extra space to add in Mask calculations. Useful when calculating space from Element bounding rect and want to add more space.

Single number sets same space for all sides, otherwise an Array sets [x, y] or [top, x, bottom] or [top, right, bottom, left].

`wrapperPadding?: number | number[]`

Extra space to add between viewport with and height.

Single number sets same space for all sides, otherwise an Array sets [x, y] or [top, x, bottom] or [top, right, bottom, left].

`onClick?: MouseEventHandler<HTMLDivElement>`

Click handler for the Mask except the highlighted area.

`onClickHighlighted?: MouseEventHandler<SVGRectElement>`

Click handler for the Highlighted area.

`maskId?: string`

String to be assigned to the <mask /> element, otherwise an automatic unique id is assigned.

`clipId?: string`

String to be assigned to the <clipPath /> element, otherwise an automatic unique id is assigned.

`styles?: StylesObj`

Prop to customize styles for the different parts of the Mask using a function that allows to extend the base styles an take advantage of some state props.

Style keys and props available

key	props
`maskWrapper`
`maskArea`	`x`, `y`, `width`, `height`
`maskRect`	`windowWidth`, `windowHeight`, `maskID`
`clickArea`	`windowWidth`, `windowHeight`, `clipID`
`highlightedArea`	`x`, `y`, `width`, `height`

Example

1const styles = {
2  maskWrapper: (base) => ({
3    ...base,
4    color: 'red',
5  }),
6  highlightedArea: (base, { x, y }) => ({
7    ...base,
8    x: x + 10,
9    y: y + 10,
10  }),
11}

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

5.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @reactour/mask

Other packages similar to @reactour/mask

@reactour/mask

Installations

Developer Guide

Yes

CommonJS

18.12.1

8.19.2

Pull Requests

9

157

61

87

Issues

71

479

408

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Install

Usage

Mask

sizes: RectResult

className?: string

highlightedAreaClassName?: string

padding?: number | number[]

wrapperPadding?: number | number[]

onClick?: MouseEventHandler<HTMLDivElement>

onClickHighlighted?: MouseEventHandler<SVGRectElement>

maskId?: string

clipId?: string

styles?: StylesObj

Style keys and props available

Example

10

10

10

10

10

7

1

0

0

0

0

0

0

5.1

/10

`Mask`

`sizes: RectResult`

`className?: string`

`highlightedAreaClassName?: string`

`padding?: number | number[]`

`wrapperPadding?: number | number[]`

`onClick?: MouseEventHandler<HTMLDivElement>`

`onClickHighlighted?: MouseEventHandler<SVGRectElement>`

`maskId?: string`

`clipId?: string`

`styles?: StylesObj`