Skip to content

Commit 6f4530a

Browse files
debabindebabin
committed
main 🧊 add new demo
1 parent fe9804c commit 6f4530a

24 files changed

Lines changed: 1253 additions & 46 deletions

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

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

88
return (
99
<section>
10-
<div ref={activeElement.ref} className='flex flex-col gap-6'>
10+
<div ref={activeElement.ref} className='flex max-w-md flex-col gap-6'>
1111
<div className='flex flex-col gap-2'>
1212
<h3>Contact form</h3>
1313

14-
<p>
14+
<p className='text-muted-foreground text-xs'>
1515
Focus any field, textarea, or button with your mouse or keyboard to see which element is
1616
currently active inside this form: <code>{activeElementId}</code>
1717
</p>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ const Demo = () => {
5858
))}
5959
</div>
6060

61-
<div className='flex flex-col gap-6 px-6 md:flex-row'>
62-
<p className='text-muted-foreground text-center text-left text-xs'>
61+
<div className='flex flex-col gap-6 px-3 md:flex-row'>
62+
<p className='text-muted-foreground text-center text-xs'>
6363
We batch analytics events for economy of scale. So far we tracked{' '}
6464
<code>{totalEvents}</code> events and sent <code>{requestsSent}</code> requests.
6565
</p>

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

Lines changed: 96 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,104 @@
11
import { useBrowserLanguage } from '@siberiacancode/reactuse';
2+
import { GlobeIcon } from 'lucide-react';
3+
4+
const TRANSLATIONS = {
5+
en: {
6+
greeting: 'Hello!',
7+
subtitle: 'Welcome to reactuse'
8+
},
9+
ru: {
10+
greeting: 'Привет!',
11+
subtitle: 'Добро пожаловать в reactuse'
12+
},
13+
es: {
14+
greeting: '¡Hola!',
15+
subtitle: 'Bienvenido a reactuse'
16+
},
17+
de: {
18+
greeting: 'Hallo!',
19+
subtitle: 'Willkommen bei reactuse'
20+
},
21+
fr: {
22+
greeting: 'Bonjour !',
23+
subtitle: 'Bienvenue sur reactuse'
24+
},
25+
it: {
26+
greeting: 'Ciao!',
27+
subtitle: 'Benvenuto su reactuse'
28+
},
29+
ja: {
30+
greeting: 'こんにちは！',
31+
subtitle: 'reactuseへようこそ'
32+
},
33+
zh: {
34+
greeting: '你好！',
35+
subtitle: '欢迎使用 reactuse'
36+
},
37+
pt: {
38+
greeting: 'Olá!',
39+
subtitle: 'Bem-vindo ao reactuse'
40+
}
41+
};
42+
43+
const getTranslation = (language: string) => {
44+
const [code] = language.split('-');
45+
return TRANSLATIONS[code.toLowerCase() as keyof typeof TRANSLATIONS] ?? TRANSLATIONS.en;
46+
};
247

348
const Demo = () => {
4-
const browserLanguage = useBrowserLanguage();
49+
const language = useBrowserLanguage();
50+
const translation = getTranslation(language);
51+
52+
const formattedDate = new Intl.DateTimeFormat(language, {
53+
month: 'long',
54+
day: 'numeric',
55+
year: 'numeric'
56+
}).format(new Date());
57+
const formattedNumber = new Intl.NumberFormat(language).format(1234567.89);
58+
const formattedPrice = new Intl.NumberFormat(language, {
59+
style: 'currency',
60+
currency: 'USD'
61+
}).format(1299.99);
62+
const formattedRelative = new Intl.RelativeTimeFormat(language, { numeric: 'auto' }).format(
63+
-2,
64+
'day'
65+
);
566

667
return (
7-
<p>
8-
Browser language: <code>{browserLanguage}</code>
9-
</p>
68+
<section className='flex min-w-md flex-col items-center p-4'>
69+
<div className='flex w-full max-w-md flex-col gap-5 p-6'>
70+
<div className='text-muted-foreground flex items-center gap-2 text-xs'>
71+
<GlobeIcon className='size-4' />
72+
<span>
73+
Detected: <code>{language}</code>
74+
</span>
75+
</div>
76+
77+
<div className='flex flex-col gap-1'>
78+
<h3>{translation.greeting}</h3>
79+
<p className='text-muted-foreground text-sm'>{translation.subtitle}</p>
80+
</div>
81+
82+
<div className='flex flex-col gap-2 border-t py-3 text-sm'>
83+
<div className='flex items-center justify-between gap-4'>
84+
<span className='text-muted-foreground'>Today</span>
85+
<strong>{formattedDate}</strong>
86+
</div>
87+
<div className='flex items-center justify-between gap-4'>
88+
<span className='text-muted-foreground'>Last seen</span>
89+
<strong>{formattedRelative}</strong>
90+
</div>
91+
<div className='flex items-center justify-between gap-4'>
92+
<span className='text-muted-foreground'>Number</span>
93+
<strong>{formattedNumber}</strong>
94+
</div>
95+
<div className='flex items-center justify-between gap-4'>
96+
<span className='text-muted-foreground'>Price</span>
97+
<strong>{formattedPrice}</strong>
98+
</div>
99+
</div>
100+
</div>
101+
</section>
10102
);
11103
};
12104

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

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,46 @@
11
import { useCookie } from '@siberiacancode/reactuse';
2+
import { BellIcon, ChevronDownIcon } from 'lucide-react';
3+
4+
const FREQUENCY_OPTIONS = [
5+
{ value: 'live', label: 'Real-time' },
6+
{ value: 'daily', label: 'Daily digest' },
7+
{ value: 'weekly', label: 'Weekly summary' },
8+
{ value: 'off', label: 'Off' }
9+
];
210

311
const Demo = () => {
4-
const { value, set, remove } = useCookie('siberiacancode-use-cookie', 0);
12+
const cookie = useCookie('notify', 'daily');
513

614
return (
7-
<div>
8-
<p>
9-
Count: <code>{value ?? 'value is undefined'}</code>
15+
<section className='flex min-w-md flex-col gap-2 p-4'>
16+
<div className='flex w-full max-w-md items-start justify-between gap-4 rounded-xl border p-4'>
17+
<div className='flex items-center gap-3'>
18+
<BellIcon className='text-muted-foreground size-6 shrink-0' />
19+
<div className='flex flex-col gap-0.5'>
20+
<span className='text-sm font-medium'>Email notifications</span>
21+
<span className='text-muted-foreground text-xs'>How often you get updates</span>
22+
</div>
23+
</div>
24+
25+
<div className='relative'>
26+
<select
27+
value={cookie.value ?? 'daily'}
28+
onChange={(event) => cookie.set(event.target.value)}
29+
>
30+
{FREQUENCY_OPTIONS.map((option) => (
31+
<option key={option.value} value={option.value}>
32+
{option.label}
33+
</option>
34+
))}
35+
</select>
36+
<ChevronDownIcon className='text-muted-foreground pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2' />
37+
</div>
38+
</div>
39+
40+
<p className='text-muted-foreground text-xs'>
41+
Saved as <code>notify={cookie.value ?? 'daily'}</code> cookie.
1042
</p>
11-
{value !== undefined && (
12-
<>
13-
<button type='button' onClick={() => set(value + 1)}>
14-
Increment
15-
</button>
16-
<button type='button' onClick={() => set(value - 1)}>
17-
Decrement
18-
</button>
19-
</>
20-
)}
21-
{value === undefined && (
22-
<button type='button' onClick={() => set(0)}>
23-
Set
24-
</button>
25-
)}
26-
<button type='button' onClick={() => remove()}>
27-
Remove
28-
</button>
29-
</div>
43+
</section>
3044
);
3145
};
3246

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,6 @@ A quick list of available functions.
2222
- [useBrowserLocation](/functions/hooks/useBrowserLocation): Hook that returns reactive browser location state with navigation controls
2323
- [useClickOutside](/functions/hooks/useClickOutside): Hook to handle click events outside the specified target element(s)
2424
- [useClipboard](/functions/hooks/useClipboard): Hook that manages a copy to clipboard
25-
- [useConst](/functions/hooks/useConst): Hook that returns the constant value
25+
- [useConst](/functions/hooks/useConst): Hook that returns the constant value
26+
- [useControllableState](/functions/hooks/useControllableState): Hook that manages both controlled and uncontrolled state patterns
27+
- [useCookie](/functions/hooks/useCookie): Hook that manages cookie value

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"useBatchedCallback","useConst",
1818

1919
"---state---",
20-
"useBoolean",
20+
"useBoolean","useControllableState","useCookie",
2121

2222
"---user---",
2323
"useBrowserLanguage"

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

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: useControllableState
3+
description: Hook that manages both controlled and uncontrolled state patterns
4+
category: state
5+
usage: medium
6+
type: hook
7+
isTest: true
8+
isDemo: true
9+
lastModifiedTime: 1757226836000
10+
---
11+
12+
import metadata from './useControllableState.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>
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 useControllableState
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 [value, setValue, isControlled] = useControllableState({ initialValue: 'initial' });
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} />

0 commit comments

Comments
 (0)