react-kuh

TypeScript-ready React (kinda) useful hooks

useWindowSize()

Usage

import{useWindowSize}from'react-kuh'functionApp(){constwindowSize=useWindowSize()return(<div><p>Width: {windowSize.width}</p><p>Height: {windowSize.height}</p></div>)}

useBoolean()

Usage

import{useBoolean}from'react-kuh'functionApp(){const[active,actions]=useBoolean(false)// if not present, default is nullreturn(<div><buttononClick={actions.on}>Active</button><buttononClick={actions.off}>Inactive</button><buttononClick={actions.off}>Inactive</button><buttononClick={()=>actions.set(false)}>Set</button><buttononClick={actions.reset}>Reset</button></div>)}

useObject

Usage

import{useObject}from'react-kuh'typeNoteType={title: stringcontent: string}functionApp(){// Type is not required if it should be inferred from the default valueconst[note,actions]=useObject<NoteType>({title: '',content: ''})functionrandomizeNote(){actions.setValue({title: Math.random().toString(12).split('.')[1],content: Math.random().toString(12).split('.')[1]})}return(<div><inputvalue={note.title}onChange={e=>{actions.setPartialValue({title: e.target.value})}}/><inputvalue={note.content}onChange={e=>{actions.setPartialValue({content: e.target.value})}}/><buttononClick={actions.reset}>Reset to initial value</button><buttononClick={randomizeNote}>Random</button></div>)}

useSecondRender

Returns true after the first render

BrowserOnly (component)

This component renders its children after the first render. This can be used as a boundary when using SSR and a component should only be rendered in the client.

Usage

import{BrowserOnly}from'react-kuh'exportdefaultfunctionPage(){return(<div><h2>This is SSR</h2><BrowserOnly><p>This is not SSR</p></BrowserOnly></div>)}