Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atomic-state/react-kuh
TypeScript-ready React (kinda) useful stuff
https://github.com/atomic-state/react-kuh
custom-hooks react react18
Last synced: 3 months ago
JSON representation
TypeScript-ready React (kinda) useful stuff
- Host: GitHub
- URL: https://github.com/atomic-state/react-kuh
- Owner: atomic-state
- License: mit
- Created: 2022-12-16T20:05:42.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T06:05:10.000Z (7 months ago)
- Last Synced: 2024-07-18T07:58:03.546Z (7 months ago)
- Topics: custom-hooks, react, react18
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### react-kuh
TypeScript-ready React (kinda) useful hooks
#### `useWindowSize()`
Usage
```tsx
import { useWindowSize } from 'react-kuh'
function App(){
const windowSize = useWindowSize()
return (
Width: {windowSize.width}
Height: {windowSize.height}
)
}
```
#### `useBoolean()`
Usage
```tsx
import { useBoolean } from 'react-kuh'
function App(){
const [active, actions] = useBoolean(false) // if not present, default is null
return (
Active
Inactive
Inactive
actions.set(false)}>Set
Reset
)
}
```
#### `useObject`
Usage
```tsx
import { useObject } from 'react-kuh'
type NoteType = {
title: string
content: string
}
function App() {
// Type is not required if it should be inferred from the default value
const [note, actions] = useObject({
title: '',
content: ''
})
function randomizeNote() {
actions.setValue({
title: Math.random().toString(12).split('.')[1],
content: Math.random().toString(12).split('.')[1]
})
}
return (
{
actions.setPartialValue({
title: e.target.value
})
}}
/>
{
actions.setPartialValue({
content: e.target.value
})
}}
/>
Reset to initial value
Random
)
}
```
#### `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
```jsx
import { BrowserOnly } from 'react-kuh'
export default function Page(){
return (
This is SSR
This is not SSR
)
}
```