@blb-ventures/react-hooks

This repo contains a collection of commonly used react hooks

Installation

npm install @blb-ventures/react-hooks # npm
yarn add @blb-ventures/react-hooks # yarn
bun add @blb-ventures/react-hooks # bun
pnpm add @blb-ventures/react-hooks # pnpm

Hooks

Use Dialogs

An alias for Use Dynamic Load

Use Dynamic Load

Use to manage a list of components that can be dynamically loaded and which one is currently opened

Usage

typeDialogs='createUser'|'updateUser';constComponent: FC=()=>{constdialogs=useDialogs<Dialogs>();return(<div><buttononClick={dialogs.handleOenDialog('createUser')}>CreateUser</button><buttononClick={dialogs.handleOenDialog('updateUser')}>UpdateUser</button>{dialogs.load.createUser&&(<CreateUserDialogopen={dialogs.open==='createUser'}onClose={dialogs.handleCloseDialog}>)}{dialogs.load.updateUser&&(<UpdateUserDialogopen={dialogs.open==='updateUser'}onClose={dialogs.handleCloseDialog}>)}</div>)}

Use Event

Use to subscribe to a HTMLElement event it returns the event data and can also trigger a callback, also unsubscribes from the event on unmount

Usage

interfaceProgressData{progress: number;}classProgressextendsEventTarget{progress: number=0;constructor(){super();}setProgress(newProgress: number){this.progress=newProgress;this.dispatchEvent(newCustomEvent<ProgressData>('progress',{detail: {progress: this.progress}}))}}constprogressInstance=newProgress();constComponent: FC=()=>{constprogress=useEvent<ProgressData>(progressInstance,'progress');return(<div><buttononClick={()=>{progressInstance.setProgress(0.5)}}>Setprogressto0.5</button><span>Currentprogress{progress}</span></div>);};

Use Polling

Use to call a function in a set interval

Usage

constComponent: FC=()=>{const[value,setValue]=useState<number>(0);constprogress=usePolling({fn: ()=>{setValue(Math.random()*100)},intervalMs: 500,autoStart: true});return(<div><span>Currentvalue{value}</span></div>);};

Use Resize Observer

Use to watch a size change on any element

Usage

constComponent: FC=()=>{constref=useRef();const[refWidth,setRefWidth]=useState(0);useResizeObserver(ref,w=>{setRefWidth(w??20);});return(<div><divref={ref}></div><p>Currentdivwidth: {refWidth}</p></div>);};

Use Window Size

Use to watch a size change on the browser window

Usage

constComponent: FC=()=>{constwidowSize=useWindowSize();return(<div><p>Currentwindowwidth: {windowSize.width}</p><p>Currentwindowheight: {windowSize.height}</p></div>);};