@lani.ground/react-hooks
v0.3.3
Published
react hooks
Downloads
18
Maintainers
Readme
react-hooks
React Hook Collection
useVisibleElement
usage
import { useVisibleElement } from '@lani.ground/react-hooks';
export default function Component() {
const { ref, activeKey, activeElement } = useVisibleElement({
activeClass: 'active',
});
console.log('activeKey', activeKey); // scroll-item-0
console.log('activeElement', activeElement); // <section><p>section 1</p></section>
return (
<div ref={ref}>
<section style={{height: '100vh'}}>
<p>section 1</p>
</section>
<section style={{height: '100vh'}}>
<p>section 2</p>
</section>
<section style={{height: '100vh'}}>
<p>section 3</p>
</section>
<section style={{height: '100vh'}}>
<p>section 4</p>
</section>
</div>
);
}
useWindowScroll
usage
import { useScrollLock } from '@lani.ground/react-hooks';
export default function Component() {
comst {lockScroll, unlockScroll} = useScrollLock();
useEffect(() => {
lockScroll();
return () => {
unlockScroll();
}
}, [])
return (<>...</>)
}
useCookie
usage
import { useCookies } from '@lani.ground/react-hooks';
import { useEffect } from 'react';
export default function Hooks() {
const { getCookie, setCookie, hasCookie, deleteCookie } = useCookies();
const setTestCookie = () => {
const day = new Date();
day.setMinutes(day.getMinutes() + 1);
setCookie('test', 'true', { expires: 'today' });
};
const checkCookie = () => {
const hasTest = hasCookie('test');
console.log('hasTest', hasTest); // true | false
};
useEffect(() => {
const testCookie = getCookie('test');
console.log('testCookie', testCookie); // true | false
}, []);
return (
<>
<button type="button" onClick={() => checkCookie()}>
Check Cookie
</button>
<button type="button" onClick={() => setTestCookie()}>
Set Cookie
</button>
<button type="button" onClick={() => deleteCookie('test')}>
Delete Cookie
</button>
</>
);
}
useString
usage
import { useString } from '@lani.ground/react-hooks';
export default function String() {
const { ellipsis } = useString();
return (
<>
<p>{ellipsis({ value: 'String', length: 3, dir: 'left' })}</p> {/* ...ing */}
<p>{ellipsis({ value: 'String', length: 3, dir: 'right' })}</p> {/* Str... */}
</>
)
}