README.md

A set of utilities used by @reactour packages

Install

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

Portal

A handy Portal Component

type?: string

The type of Element to render in the DOM

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

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

import { Portal } from '@reactour/utils'
function App() {
  function refresh() {
    console.log('mutated!')
  }
  return (
    <>
      <p className="mutation-elem">Vestibulum maximus vitae </p>
      <textarea
        className="resize-elem"
        defaultValue="Vestibulum maximus vitae"
      />
      <Observables
        resizeObservables={['.resize-elem']}
        mutationObservables={['.mutation-elem']}
        refresh={refresh}
      />
      {/* ...*/}
    </>
  )
}

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

import { useRef } from 'react'
import { useRect } from '@reactour/utils'
function App() {
  const ref = useRef(null)
  const sizes = useRect(ref)
  return (
    <>
      <p ref={ref}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      {/* ...*/}
    </>
  )
}

useElemRect({ elem, refresher })

Same as useRect but providing an Element

elem?: Element

DOM Element

refresher?: any

Any value that if changed, updates calculations

import { useElemRect } from '@reactour/utils'
function App() {
  const elem = document.querySelector('.elem')
  const sizes = useElemRect(elem)
  return (
    <>
      <p class="elem">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      {/* ...*/}
    </>
  )
}

More Utils

getRect(element?:Element): RectResult

Type details

type RectResult = {
  bottom: number
  height: number
  left: number
  right: number
  top: number
  width: number
}

Get Element Bounding Rect from Element

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

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

Get window width and height

import { getWindow } from '@reactour/utils'

const { w, h } = getWindow()

inView(args: InViewArgs): boolean

Type details

type InViewArgs = {
  width: number
  height: number
  top: number
  left: number
  bottom?: number
  right?: number
  threshold?: number
}

Check if position values are in viewport

import { inView } from '@reactour/utils'

const 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

const elem = documet.querySelector('.elem')

smoothScroll(elem).then(() => {
  console.log('Scrolled!')
})