JSPM – @reactour/utils@0.4.0

Package Exports

@reactour/utils
@reactour/utils/dist/index.js
@reactour/utils/dist/utils.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@reactour/utils) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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?: { x: number, y: number } | 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!')
})