npmpackage.info

Gathering detailed insights and metrics for @reactour/popover

@reactour/popover - 1.2.0 | npmpackage.info

@reactour/popover

Tourist Guide into your React Components

1.2.0

3,951

MIT

TypeScript

22.10 kB

5.1

Installations

npm install @reactour/popover

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.13.1

NPM Version

10.5.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.2.0

Package Id

@reactour/popover@1.2.0

Unpacked Size

22.10 kB

Size

5.55 kB

File Count

NPM Version

10.5.2

Node Version

20.13.1

Published on

Jun 20, 2024

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

A popover positioned based on certain values

Documentation

https://docs.react.tours/popover

Install

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

Usage

1import { Popover } from '@reactour/popover'
2
3function App() {
4  const sizes = {
5    bottom: 0,
6    left: 0,
7  }
8
9  return (
10    <>
11      {/* ... */}
12      <Popover sizes={sizes}>
13    </>
14  )
15}

`Popover`

`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 Popover

`position?: Position`

Type details

1type Position =
2  | 'top'
3  | 'right'
4  | 'bottom'
5  | 'left'
6  | 'center'
7  | [number, number]
8  | ((postionsProps: PositionProps, prevRect: RectResult) => Position)
9
10type PositionProps = {
11  bottom: number
12  height: number
13  left: number
14  right: number
15  top: number
16  width: number
17  windowWidth: number
18  windowHeight: number
19}

The position for the Popover, fixed in case of [number, number], calculated prefered position in case of string

`padding?: number | number[]`

Extra space to add in Popover position 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].

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

`className?: string`

Class to apply to the Popover

Style keys and props available

key	props
`popover`	`position`, `verticalAlign`, `horizontalAlign`, `helperRect`, `targetRect`

`refresher?: any`

Any value that if changed, updates rect calculations

Example

1const styles = {
2  popover: (base) => ({
3    ...base,
4    boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)',
5    backgroundColor: '#dedede',
6  }),
7}

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

@reactour/popover

Installations

Developer Guide

Yes

CommonJS

20.13.1

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

Documentation

Install

Usage

Popover

sizes: RectResult

position?: Position

padding?: number | number[]

styles?: StylesObj

className?: string

Style keys and props available

refresher?: any

Example

10

10

10

10

10

7

1

0

0

0

0

0

0

5.1

/10

`Popover`

`sizes: RectResult`

`position?: Position`

`padding?: number | number[]`

`styles?: StylesObj`

`className?: string`

`refresher?: any`