Using npm:
$ npm i @teasource/ducimus-magnam-dolor
The useDebounceState hook is a custom React hook that provides a debounced version of the useState hook. It allows you to delay the update of a state value until a specified amount of time has passed without any new updates. This can be useful in scenarios where you want to reduce the number of rapid updates and perform some actions only after a certain delay.
import { useDebounceState } from '@teasource/ducimus-magnam-dolor'
function App() {
const [value, setValue] = useDebounceState < string > ('', 1000)
return (
<main>
<h1>{value}</h1>
<input
type="text"
defaultValue={value}
placeholder="Type here"
onChange={(e) => setValue(e.target.value)}
/>
</main>
)
}
export default App
import { useStorage } from '@teasource/ducimus-magnam-dolor'
function App() {
const [data, setData] = useStorage < { message: string } > 'myData'
const handleSetData = () => {
setData({
message: 'hello world',
})
}
const handleDelete = () => {
// to delete localStorage item just set it to null
setData(null)
}
console.log(data) // {message: 'hello world'}
return (
<main>
<button onClick={handleSetData}>set data</button>
<button onClick={handleDelete}>delete</button>
<h1>{data?.message}</h1>
</main>
)
}
export default App
The useIntersection hook allows you to track the intersection of a target element with its containing element or the viewport.
threshold (optional): A number or an array of numbers indicating at what percentage of the target's visibility the observer's callback should be executed.
import { useIntersection } from '@teasource/ducimus-magnam-dolor'
function App() {
const { isIntersecting, ref } = useIntersection({ rootMargin: '-100px' })
console.log(isIntersecting)
return (
<main className="flex flex-col min-h-screen items-center justify-center">
<div className="h-screen"></div>
<div ref={ref}>
{isIntersecting ? 'Intersecting' : 'Not intersecting'}
</div>
<div className="h-screen"></div>
</main>
)
}
export default App
The useFetch hook simplifies making HTTP requests and handling the response asynchronously. It provides the fetched data, error information, and a function to trigger a refetch.
import { useFetch } from '@teasource/ducimus-magnam-dolor'
function App() {
const { data, isFetching, error, refetch } = useFetch(
'https://jsonplaceholder.typicode.com/todos/1'
)
if (isFetching) {
return <div>Loading...</div>
}
if (error) {
return <div>Error: {error}</div>
}
return (
<main>
<div>{JSON.stringify(data)}</div>
<button onClick={() => refetch()}>Refetch</button>
</main>
)
}
export default App
import { useCookie } from '@teasource/ducimus-magnam-dolor'
function App() {
const [cookie, setCookie] = useCookie('my_cookie')
const handleSetCookie = () => {
// setCookie takes two parameters: value, opts
setCookie('cookie_value', {
expires: new Date(Date.now() + 3600000), // Expires in 1 hour
})
}
const handleDeleteCookie = () => {
// to delete cookie set it to null or set expires in opts to past date
setCookie(null)
}
return (
<main>
<button onClick={handleSetCookie}>Set cookie</button>
<button onClick={handleDeleteCookie}>Delete cookie</button>
<h1>{cookie}</h1>
</main>
)
}
export default App