Provides an image from a respective URL
const Component = ({ src, alt, width = 320, height = 240, fallback }) => {
const { progress, response, error } = useImage(src)
if (response) {
return <img src={response.data} alt={alt} width={width} height={height} />;
} else if (error) {
return fallback ? fallback(error) : '❌';
}
return (
<ProgressLoading
progress={progress.ratio}
width={`${width}px`}
height={`${height}px`}
/>
);
};
Allows to get x
and y
scroll position on the page.
const Component = () => {
const scroll = useScrollPosition();
return (
<pre>
<code>x = {scroll.x}</code>
<br />
<code>y = {scroll.y}</code>
<hr />
</pre>
);
};
Toggle classes on every element update
const Component = () => {
const [value, setValue] = useState('')
// useReflow arguments are css classes to be attributed when its own dom changes
const ref = useReflow('highlight', 'bolder')
return (
<>
<h1>Value changed to <span ref={ref}>{value}</span></h1>
<input type="text" value={value} onChange={(event) => setValue(event.target.value)} />
</>
)
}
Shorthand to URL query parameters
const Component = () => {
const query = useSearchQueryParams()
const page = query.get('page')
const limit = queryu.get('limit')
return (
<p>This page is = {page} and the limit items by page is {limit}</p>
)
}
Helps to format masked or patterns on input fields
import React, { createRef } from "react";
import useInputFormated from "../hooks/useInputFormated";
const toCurrency = value =>
value
.toLocaleString("pt-BR", {
style: "currency",
currency: "BRL"
})
export default function CurrencyField() {
const ref = createRef()
const [value] = useInputFormated({ ref, formatter: toCurrency })
return <input ref={ref} type="text" value={value} />;
}