Skip to content

Commit d592f98

Browse files
debabindebabin
committed
main 🧊 add new hooks for index
1 parent d2cead4 commit d592f98

File tree

23 files changed

+176
-129
lines changed

23 files changed

+176
-129
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,15 @@ export default async () => {
4040
}
4141
},
4242
transformPageData: (pageData) => {
43-
pageData.frontmatter.head ??= []
43+
pageData.frontmatter.head ??= [];
4444
pageData.frontmatter.head.push([
4545
'meta',
4646
{
4747
name: 'og:image',
48-
content: 'https://repository-images.githubusercontent.com/799880708/be8887a4-0cf5-4929-a5f0-dba8d70a7d1f'
48+
content:
49+
'https://repository-images.githubusercontent.com/799880708/be8887a4-0cf5-4929-a5f0-dba8d70a7d1f'
4950
}
50-
])
51+
]);
5152

5253
if (pageData.relativePath === 'index.md') {
5354
pageData.frontmatter.features = homePageFeatures;

‎docs/functions/hooks/[name].paths.mts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ export default {
6868
const pages = params.filter(Boolean);
6969

7070
console.log('\nHooks injection report\n');
71-
console.log('\x1b[32mInjected: ' + pages.length + '\x1b[0m');
72-
console.log('\x1b[33mSkipped: ' + (hooks.length - pages.length) + '\x1b[0m');
73-
console.log('Total: ' + hooks.length);
71+
console.log(`\x1B[32mInjected: ${pages.length}\x1B[0m`);
72+
console.log(`\x1B[33mSkipped: ${hooks.length - pages.length}\x1B[0m`);
73+
console.log(`Total: ${hooks.length}`);
7474

7575
// console.table([
7676
// { Status: 'Injected', Count: injected },

‎src/hooks/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export * from './useDeviceOrientation/useDeviceOrientation';
1919
export * from './useDevicePixelRatio/useDevicePixelRatio';
2020
export * from './useDidUpdate/useDidUpdate';
2121
export * from './useDisclosure/useDisclosure';
22+
export * from './useDisplayMedia/useDisplayMedia';
2223
export * from './useDocumentEvent/useDocumentEvent';
2324
export * from './useDocumentTitle/useDocumentTitle';
2425
export * from './useDocumentVisibility/useDocumentVisibility';
@@ -93,10 +94,12 @@ export * from './useResizeObserver/useResizeObserver';
9394
export * from './useScreenOrientation/useScreenOrientation';
9495
export * from './useScript/useScript';
9596
export * from './useScroll/useScroll';
97+
export * from './useScrollIntoView/useScrollIntoView';
9698
export * from './useScrollTo/useScrollTo';
9799
export * from './useSessionStorage/useSessionStorage';
98100
export * from './useSet/useSet';
99101
export * from './useShare/useShare';
102+
export * from './useStateHistory/useStateHistory';
100103
export * from './useStep/useStep';
101104
export * from './useStopwatch/useStopwatch';
102105
export * from './useStorage/useStorage';

‎src/hooks/useAsync/useAsync.demo.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,10 @@ const Demo = () => {
2323
</button>
2424

2525
{getPokemonQuery.isLoading && (
26-
<div className='animate-pulse flex flex-col gap-2'>
27-
<div className='h-7 rounded-md bg-neutral-600 w-40' />
26+
<div className='flex animate-pulse flex-col gap-2'>
27+
<div className='h-7 w-40 rounded-md bg-neutral-600' />
2828
<div className='size-96 rounded-md bg-neutral-600' />
2929
</div>
30-
3130
)}
3231

3332
{getPokemonQuery.data && (
@@ -38,7 +37,6 @@ const Demo = () => {
3837
<div className='size-96'>
3938
<img
4039
alt={getPokemonQuery.data.name}
41-
4240
src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${getPokemonQuery.data.id}.png`}
4341
/>
4442
</div>

‎src/hooks/useDevicePixelRatio/useDevicePixelRatio.demo.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ const Demo = () => {
77
return <p>Device pixel ratio is not supported.</p>;
88
}
99

10-
return <p>Device pixel ratio (try to zoom page in and out): <code>{ratio}</code></p>;
10+
return (
11+
<p>
12+
Device pixel ratio (try to zoom page in and out): <code>{ratio}</code>
13+
</p>
14+
);
1115
};
1216

1317
export default Demo;

‎src/hooks/useDisplayMedia/useDisplayMedia.demo.tsx‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,19 @@
11
import { useDisplayMedia } from './useDisplayMedia';
22

33
const Demo = () => {
4-
const { sharing, supported, start, stop, ref } = useDisplayMedia();
4+
const { sharing, supported, start, stop, ref } = useDisplayMedia();
55

6-
return (
7-
<div className="flex flex-col gap-4">
8-
<div className="flex gap-4 justify-center items-center">
9-
<button
10-
disabled={!supported}
11-
type="button"
12-
onClick={sharing ? stop : start}
13-
>
14-
{sharing ? 'Stop Sharing' : 'Start Sharing'}
15-
</button>
16-
</div>
6+
return (
7+
<div className='flex flex-col gap-4'>
8+
<div className='flex items-center justify-center gap-4'>
9+
<button disabled={!supported} type='button' onClick={sharing ? stop : start}>
10+
{sharing ? 'Stop Sharing' : 'Start Sharing'}
11+
</button>
12+
</div>
1713

18-
<video
19-
muted
20-
playsInline
21-
ref={ref}
22-
className="w-full max-w-2xl border rounded"
23-
autoPlay
24-
/>
25-
</div>
26-
);
14+
<video muted playsInline ref={ref} className='w-full max-w-2xl rounded border' autoPlay />
15+
</div>
16+
);
2717
};
2818

2919
export default Demo;

‎src/hooks/useDisplayMedia/useDisplayMedia.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ targets.forEach((target) => {
135135
act(() => result.current.ref(document.getElementById('target')! as HTMLVideoElement));
136136

137137
await waitFor(() => expect(mockGetDisplayMedia).toHaveBeenCalled());
138-
expect(result.current.sharing).toBe(true);
138+
await waitFor(() => expect(result.current.sharing).toBe(true));
139139
});
140140

141141
it('Should accept boolean audio and video constraints', async () => {

‎src/hooks/useEventListener/useEventListener.demo.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ const Demo = () => {
77

88
useEventListener('click', () => setCount(count + 1));
99

10-
return <p>Click count: <code>{count}</code></p>;
10+
return (
11+
<p>
12+
Click count: <code>{count}</code>
13+
</p>
14+
);
1115
};
1216

1317
export default Demo;

‎src/hooks/useFullscreen/useFullscreen.demo.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ const Demo = () => {
44
const fullscreen = useFullscreen<HTMLVideoElement>();
55

66
return (
7-
<div >
8-
<div className="text-center" >
9-
<div className="flex py-4">
7+
<div>
8+
<div className='text-center'>
9+
<div className='flex py-4'>
1010
<video
11-
ref={fullscreen.ref}
12-
className="m-auto rounded"
13-
src="https://vjs.zencdn.net/v/oceans.mp4"
14-
width="600"
1511
muted
12+
ref={fullscreen.ref}
13+
className='m-auto rounded'
14+
src='https://vjs.zencdn.net/v/oceans.mp4'
15+
width='600'
1616
controls
1717
/>
1818
</div>
19-
<button type="button" onClick={fullscreen.toggle}>
19+
<button type='button' onClick={fullscreen.toggle}>
2020
Go Fullscreen
2121
</button>
2222
</div>

‎src/hooks/useIntersectionObserver/useIntersectionObserver.demo.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,22 @@ const Demo = () => {
1010
});
1111

1212
return (
13-
<div className="text-center">
14-
<div className="text-center">
15-
Element <code className="font-bold">{intersectionObserver.inView ? 'inside' : 'outside'}</code> the viewport
13+
<div className='text-center'>
14+
<div className='text-center'>
15+
Element{' '}
16+
<code className='font-bold'>{intersectionObserver.inView ? 'inside' : 'outside'}</code> the
17+
viewport
1618
</div>
1719

18-
<div ref={rootRef} className="border-2 border-dashed border-gray-400 h-52 my-8 overflow-y-scroll rounded-xl">
19-
<p className="text-center py-8 mb-72 italic text-xl opacity-80">
20-
Scroll me down!
21-
</p>
22-
<div ref={intersectionObserver.ref} className="border-2 border-dashed border-blue-500 p-4 max-h-40 mx-8 mb-96 rounded-xl">
20+
<div
21+
ref={rootRef}
22+
className='my-8 h-52 overflow-y-scroll rounded-xl border-2 border-dashed border-gray-400'
23+
>
24+
<p className='mb-72 py-8 text-center text-xl italic opacity-80'>Scroll me down!</p>
25+
<div
26+
ref={intersectionObserver.ref}
27+
className='mx-8 mb-96 max-h-40 rounded-xl border-2 border-dashed border-blue-500 p-4'
28+
>
2329
<p>Hello world!</p>
2430
</div>
2531
</div>

0 commit comments

Comments
 (0)