Skip to content

Commit 735b5c9

Browse files
debabindebabin
committed
main 🧊 add new demos
1 parent 929a3dc commit 735b5c9

15 files changed

Lines changed: 845 additions & 45 deletions

File tree

‎packages/core/src/hooks/useMount/useMount.demo.tsx‎

Lines changed: 71 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,80 @@
1-
import { useBoolean, useMount } from '@siberiacancode/reactuse';
1+
import { useMount } from '@siberiacancode/reactuse';
2+
import { RocketIcon, SparklesIcon, ZapIcon } from 'lucide-react';
3+
import { useState } from 'react';
24

3-
const Component = () => {
4-
useMount(() => alert('mount'));
5+
import { cn } from '@/utils/lib';
56

6-
return <p>Hello World!</p>;
7-
};
7+
const STEPS = [
8+
{ icon: RocketIcon, title: 'Get started fast', description: 'Set up your workspace in seconds' },
9+
{ icon: ZapIcon, title: 'Powerful hooks', description: 'Everything you need, ready to use' },
10+
{
11+
icon: SparklesIcon,
12+
title: 'Polished by default',
13+
description: 'Beautiful components out of the box'
14+
}
15+
];
816

917
const Demo = () => {
10-
const [on, toggle] = useBoolean(false);
18+
const [started, setStarted] = useState(false);
19+
20+
useMount(() => {
21+
const timeoutId = setTimeout(setStarted, 1000, true);
22+
return () => clearTimeout(timeoutId);
23+
});
1124

1225
return (
13-
<>
14-
<button type='button' onClick={() => toggle()}>
15-
{on ? 'Unmount' : 'Mount'}
16-
</button>
17-
{on && <Component />}
18-
</>
26+
<section className='flex min-h-72 w-full max-w-sm flex-col items-center justify-center p-4'>
27+
<div
28+
className={cn(
29+
'flex flex-col items-center text-center transition-all duration-700 ease-out',
30+
started ? 'scale-100' : 'scale-110'
31+
)}
32+
>
33+
<span
34+
className={cn(
35+
'text-foreground font-bold tracking-tight transition-all duration-700 ease-out',
36+
started ? 'text-2xl' : 'text-4xl'
37+
)}
38+
>
39+
Welcome back 👋
40+
</span>
41+
<span
42+
className={cn(
43+
'text-muted-foreground mt-2 transition-all duration-700 ease-out',
44+
started ? 'text-sm' : 'text-base'
45+
)}
46+
>
47+
Here's everything you can do
48+
</span>
49+
</div>
50+
51+
<div
52+
className={cn(
53+
'flex w-full flex-col gap-4 overflow-hidden transition-all duration-700 ease-out',
54+
started ? 'mt-8 max-h-96 opacity-100' : 'mt-0 max-h-0 opacity-0'
55+
)}
56+
>
57+
{STEPS.map((step, index) => {
58+
const Icon = step.icon;
59+
return (
60+
<div
61+
key={step.title}
62+
className={cn(
63+
'flex items-center gap-3 transition-all duration-500 ease-out',
64+
started ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'
65+
)}
66+
style={{ transitionDelay: started ? `${400 + index * 120}ms` : '0ms' }}
67+
>
68+
<Icon className='text-foreground size-4 shrink-0' />
69+
<div className='flex flex-col leading-tight'>
70+
<span className='text-foreground text-sm font-medium'>{step.title}</span>
71+
<span className='text-muted-foreground text-xs'>{step.description}</span>
72+
</div>
73+
</div>
74+
);
75+
})}
76+
</div>
77+
</section>
1978
);
2079
};
2180

‎packages/core/src/hooks/useMouse/useMouse.demo.tsx‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,51 @@
1-
import { useHover, useMouse } from '@siberiacancode/reactuse';
1+
import { useMouse } from '@siberiacancode/reactuse';
2+
import { ArrowRightIcon } from 'lucide-react';
23
import { useRef } from 'react';
34

4-
import { cn } from '@/utils/lib';
5-
65
const Demo = () => {
7-
const modalRef = useRef<HTMLDivElement>(null);
6+
const spotlightRef = useRef<HTMLDivElement>(null);
7+
88
const mouse = useMouse<HTMLDivElement>((value) => {
9-
if (!modalRef.current) return;
10-
const modal = modalRef.current;
11-
modal.style.left = `${value.clientX + 24}px`;
12-
modal.style.top = `${value.clientY + 24}px`;
13-
modalRef.current.textContent = `x: ${value.clientX}, y: ${value.clientY}`;
9+
const spotlight = spotlightRef.current;
10+
if (!spotlight) return;
11+
spotlight.style.setProperty('--x', `${value.elementX}px`);
12+
spotlight.style.setProperty('--y', `${value.elementY}px`);
1413
});
1514

16-
const hover = useHover<HTMLDivElement>();
17-
1815
return (
19-
<div ref={mouse.ref} className='flex min-h-[400px] items-center justify-center'>
16+
<section className='flex w-full max-w-md justify-center p-4'>
2017
<div
21-
ref={hover.ref}
22-
className={cn(
23-
'relative flex h-[300px] w-[340px] items-center justify-center rounded-xl border-2 border-dashed transition-all duration-500',
24-
{
25-
'border-green-500': hover.value
26-
}
27-
)}
18+
ref={mouse.ref}
19+
className='group relative w-full overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 p-8'
2820
>
29-
<span className='text-center text-lg font-medium text-white select-none'>
30-
Use a ref to add coords
31-
<br />
32-
relative to the element
33-
</span>
34-
3521
<div
36-
ref={modalRef}
37-
className='fixed z-50 rounded-lg border-1 bg-[var(--vp-code-block-bg)] p-6'
22+
ref={spotlightRef}
23+
style={{
24+
background:
25+
'radial-gradient(300px circle at var(--x) var(--y), rgba(255,255,255,0.1), transparent 65%)'
26+
}}
27+
className='pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100'
3828
/>
29+
30+
<div className='relative flex flex-col gap-4'>
31+
<img alt='reactuse' className='size-9' src='https://reactuse.org/logo.svg' />
32+
33+
<div className='flex flex-col gap-1.5'>
34+
<h2 className='text-xl font-bold text-white'>Ship faster with reactuse</h2>
35+
<p className='max-w-xs text-sm text-neutral-400'>
36+
A collection of essential React hooks, fully typed and ready for production.
37+
</p>
38+
</div>
39+
40+
<div className='mt-2'>
41+
<button type='button'>
42+
Get started
43+
<ArrowRightIcon className='size-4' />
44+
</button>
45+
</div>
46+
</div>
3947
</div>
40-
</div>
48+
</section>
4149
);
4250
};
4351

‎packages/newdocs/content/docs/(root)/functions.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,4 +88,6 @@ A quick list of available functions.
8888
- [useMediaControls](/functions/hooks/useMediaControls): that provides controls for HTML media elements (audio/video)
8989
- [useMediaQuery](/functions/hooks/useMediaQuery): Hook that manages a media query
9090
- [useMemory](/functions/hooks/useMemory): Hook that gives you current memory usage
91-
- [useMergedRef](/functions/hooks/useMergedRef): Hook that merges multiple refs into a single ref
91+
- [useMergedRef](/functions/hooks/useMergedRef): Hook that merges multiple refs into a single ref
92+
- [useMount](/functions/hooks/useMount): Hook that executes a callback when the component mounts
93+
- [useMouse](/functions/hooks/useMouse): Hook that manages a mouse position

‎packages/newdocs/content/functions/hooks/meta.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"useAsync","useLockCallback",
99

1010
"---lifecycle---",
11-
"useAsyncEffect","useDidUpdate","useIsFirstRender","useIsomorphicLayoutEffect",
11+
"useAsyncEffect","useDidUpdate","useIsFirstRender","useIsomorphicLayoutEffect","useMount",
1212

1313
"---browser---",
1414
"useAudio","useBattery","useBluetooth","useBreakpoints","useBroadcastChannel","useBrowserLocation","useClipboard","useCopy","useCssVar","useDisplayMedia","useDocumentEvent","useDocumentTitle","useDocumentVisibility","useEventListener","useEventSource","useEyeDropper","useFavicon","useFileSystemAccess","useFps","useFullscreen","useGamepad","useGeolocation","useMeasure","useMediaControls","useMediaQuery","useMemory",
@@ -23,7 +23,7 @@
2323
"useBrowserLanguage",
2424

2525
"---sensors---",
26-
"useDeviceMotion","useDeviceOrientation","useHotkeys","useIdle","useInfiniteScroll","useIntersectionObserver","useKeyboard","useKeyPress","useKeysPressed",
26+
"useDeviceMotion","useDeviceOrientation","useHotkeys","useIdle","useInfiniteScroll","useIntersectionObserver","useKeyboard","useKeyPress","useKeysPressed","useMouse",
2727

2828
"---humor---",
2929
"useFul","useLess",

‎packages/newdocs/content/functions/hooks/useMount.mdx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: useMount
3+
description: Hook that executes a callback when the component mounts
4+
category: lifecycle
5+
usage: necessary
6+
type: hook
7+
isTest: true
8+
isDemo: true
9+
lastModifiedTime: 1754977987000
10+
---
11+
12+
import metadata from './useMount.meta.json';
13+
14+
<FunctionBanner browserapi={metadata.browserapi} code={metadata.demo} type={metadata.type} name={metadata.name} language="tsx" />
15+
16+
## Installation
17+
18+
<FunctionTabs className='space-y-2'>
19+
<TabsList>
20+
<TabsTrigger value='library'>Library</TabsTrigger>
21+
<TabsTrigger value='cli'>CLI</TabsTrigger>
22+
<TabsTrigger value='manual'>Manual</TabsTrigger>
23+
</TabsList>
24+
<TabsContent value='library'>
25+
```packages-install
26+
npm install @siberiacancode/reactuse
27+
```
28+
</TabsContent>
29+
<TabsContent value='cli'>
30+
```packages-install
31+
npx useverse@latest add useMount
32+
```
33+
</TabsContent>
34+
<TabsContent value='manual'>
35+
<Steps>
36+
<Step>
37+
Copy and paste the following code into your project.
38+
</Step>
39+
<FunctionCode code={metadata.code} language="tsx" />
40+
<Step>
41+
Update the import paths to match your project setup.
42+
</Step>
43+
</Steps>
44+
</TabsContent>
45+
</FunctionTabs>
46+
47+
## Usage
48+
49+
```tsx
50+
useMount(() => console.log('This effect runs on the initial render'));
51+
```
52+
53+
## Type Declarations
54+
55+
<FunctionCode code={metadata.typeDeclarations} language="tsx" />
56+
57+
## API
58+
59+
<FunctionApi apiParameters={metadata.apiParameters} />
60+
61+
## Contributors
62+
63+
<FunctionContributors contributors={metadata.contributors} />

‎packages/newdocs/content/functions/hooks/useMount.meta.json‎

Lines changed: 80 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/newdocs/content/functions/hooks/useMouse.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: useMouse
3+
description: Hook that manages a mouse position
4+
category: sensors
5+
usage: low
6+
type: hook
7+
isTest: true
8+
isDemo: true
9+
lastModifiedTime: 1773475680000
10+
---
11+
12+
import metadata from './useMouse.meta.json';
13+
14+
<FunctionBanner browserapi={metadata.browserapi} code={metadata.demo} type={metadata.type} name={metadata.name} language="tsx" />
15+
16+
## Installation
17+
18+
<FunctionTabs className='space-y-2'>
19+
<TabsList>
20+
<TabsTrigger value='library'>Library</TabsTrigger>
21+
<TabsTrigger value='cli'>CLI</TabsTrigger>
22+
<TabsTrigger value='manual'>Manual</TabsTrigger>
23+
</TabsList>
24+
<TabsContent value='library'>
25+
```packages-install
26+
npm install @siberiacancode/reactuse
27+
```
28+
</TabsContent>
29+
<TabsContent value='cli'>
30+
```packages-install
31+
npx useverse@latest add useMouse
32+
```
33+
</TabsContent>
34+
<TabsContent value='manual'>
35+
<Steps>
36+
<Step>
37+
Copy and paste the following code into your project.
38+
</Step>
39+
<FunctionCode code={metadata.code} language="tsx" />
40+
<Step>
41+
Update the import paths to match your project setup.
42+
</Step>
43+
</Steps>
44+
</TabsContent>
45+
</FunctionTabs>
46+
47+
## Usage
48+
49+
```tsx
50+
const mouse = useMouse(ref);
51+
// or
52+
const mouse = useMouse<HTMLDivElement>();
53+
```
54+
55+
## Type Declarations
56+
57+
<FunctionCode code={metadata.typeDeclarations} language="tsx" />
58+
59+
## API
60+
61+
<FunctionApi apiParameters={metadata.apiParameters} />
62+
63+
## Contributors
64+
65+
<FunctionContributors contributors={metadata.contributors} />

‎packages/newdocs/content/functions/hooks/useMouse.meta.json‎

Lines changed: 273 additions & 0 deletions
Large diffs are not rendered by default.

‎packages/newdocs/generated/demos/hooks/useMount.demo.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
'use client';
2+
3+
import { useMount } from '@siberiacancode/reactuse';
4+
import { RocketIcon, SparklesIcon, ZapIcon } from 'lucide-react';
5+
import { useState } from 'react';
6+
7+
import { cn } from '@/utils/lib';
8+
9+
const STEPS = [
10+
{ icon: RocketIcon, title: 'Get started fast' },
11+
{ icon: ZapIcon, title: 'Powerful hooks' },
12+
{ icon: SparklesIcon, title: 'Magic by default' }
13+
];
14+
15+
const Demo = () => {
16+
const [started, setStarted] = useState(false);
17+
18+
useMount(() => {
19+
const timeoutId = setTimeout(setStarted, 1000, true);
20+
return () => clearTimeout(timeoutId);
21+
});
22+
23+
return (
24+
<section className='flex min-h-72 w-full max-w-sm flex-col items-center justify-center p-4'>
25+
<div
26+
className={cn(
27+
'flex flex-col items-center text-center transition-transform duration-700 ease-out',
28+
started ? '-translate-y-2' : 'translate-y-12'
29+
)}
30+
>
31+
<span
32+
className={cn(
33+
'text-foreground text-2xl font-bold transition-all duration-500 ease-out',
34+
started && 'scale-90'
35+
)}
36+
>
37+
Welcome back 👋
38+
</span>
39+
<span className='text-muted-foreground text-sm'>Here's everything you can do</span>
40+
</div>
41+
42+
<div className='mt-6 flex w-full flex-col items-center gap-3'>
43+
{STEPS.map((step, index) => {
44+
const Icon = step.icon;
45+
return (
46+
<div
47+
key={step.title}
48+
className={cn(
49+
'text-muted-foreground flex items-center gap-2 transition-all duration-500 ease-out',
50+
started ? 'translate-y-0 opacity-100' : 'translate-y-3 opacity-0'
51+
)}
52+
style={{ transitionDelay: started ? `${300 + index * 120}ms` : '0ms' }}
53+
>
54+
<Icon className='size-4 shrink-0' />
55+
<span className='text-xs'>{step.title}</span>
56+
</div>
57+
);
58+
})}
59+
</div>
60+
</section>
61+
);
62+
};
63+
64+
export default Demo;

0 commit comments

Comments
 (0)