@stefanoruth/react-helpers v1.0.27

React Helpers

A small set of components to help bulding simpler code.

Features

• Scroll lock
• Focus trap
• Click away listener
• Keyboard listiner
• Simple Portals
• ClassName builder
• Config Builder
• Interval Hook

Installation

yarn add @stefanoruth/react-helpers

or

npm install @stefanoruth/react-helpers --save

Basic usage

import { Portal, useScrollLockEffect, useTabFocus, useOnClickAway, useOnEscKey } from '@stefanoruth/react-helpers'

export const Modal: React.FunctionComponent<{ onClose: () => void }> = props => {
    const modalRef = React.useRef < HTMLDivElement > null

    useScrollLockEffect()

    useTabFocus(modalRef)

    useOnClickAway(modalRef, () => {
        props.onClose()
    })

    useOnEscKey(() => {
        props.onClose()
    })

    return (
        <Portal>
            <div ref={modalRef}>
                <button onClick={props.onClose}>Close</button>
                {props.children}
            </div>
        </Portal>
    )
}

Development

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

npm link example/node_modules/react

yarn dev

License

MIT