A set of utilities used by @reactour packages

Install

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

Portal

A handy Portal Component

type?: string

The type of Element to render in the DOM

1import { Portal } from '@reactour/utils'
2function App() {
3  return <Portal type="div">{/* ...*/}</Portal>
4}

Observables

A component used by Tour to handle Mutation and Resize Observer.

mutationObservables?: string[]

Array of CSS Selector to track mutations

resizeObservables?: string[]

Array of CSS Selector to track resizing

refresh?: any

Function to fire on each mutation update

1import { Portal } from '@reactour/utils'
2function App() {
3  function refresh() {
4    console.log('mutated!')
5  }
6  return (
7    <>
8      <p className="mutation-elem">Vestibulum maximus vitae </p>
9      <textarea
10        className="resize-elem"
11        defaultValue="Vestibulum maximus vitae"
12      />
13      <Observables
14        resizeObservables={['.resize-elem']}
15        mutationObservables={['.mutation-elem']}
16        refresh={refresh}
17      />
18      {/* ...*/}
19    </>
20  )
21}

useRect({ ref, refresher })

Calculates Element Bounding Rect by ref provided

ref?: React.RefObject<T>

Ref attached at the element

refresher?: any

Any value that if changed, updates calculations

1import { useRef } from 'react'
2import { useRect } from '@reactour/utils'
3function App() {
4  const ref = useRef(null)
5  const sizes = useRect(ref)
6  return (
7    <>
8      <p ref={ref}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
9      {/* ...*/}
10    </>
11  )
12}

useElemRect({ elem, refresher })

Same as useRect but providing an Element

elem?: Element

DOM Element

refresher?: any

Any value that if changed, updates calculations

1import { useElemRect } from '@reactour/utils'
2function App() {
3  const elem = document.querySelector('.elem')
4  const sizes = useElemRect(elem)
5  return (
6    <>
7      <p class="elem">
8        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
9      </p>
10      {/* ...*/}
11    </>
12  )
13}

More Utils

getRect(element?:Element): RectResult

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

Get Element Bounding Rect from Element

1const elem = documet.querySelector('.elem')
2const sizes = getRect(elem)

getWindow(): { w: number; h: number }

Get window width and height

1import { getWindow } from '@reactour/utils'
2
3const { w, h } = getWindow()

inView(args: InViewArgs): boolean

1type InViewArgs = {
2  width: number
3  height: number
4  top: number
5  left: number
6  bottom?: number
7  right?: number
8  threshold?: { x: number; y: number } | number
9}

Check if position values are in viewport

1import { inView } from '@reactour/utils'
2
3const isInView = inView({ top: 10, right: 10, bottom: 10, left: 10 })

smoothScroll(elem: Element | null, options: ScrollIntoViewOptions)

Scroll DOM Element into view using native smooth behavior with a callback when scroll finishes

1const elem = documet.querySelector('.elem')
2
3smoothScroll(elem).then(() => {
4  console.log('Scrolled!')
5})