Skip to content

Commit 72d2dde

Browse files
handotdevhandotdev
committed
Update react hooks
1 parent d345b7f commit 72d2dde

File tree

1 file changed

+132
-135
lines changed

1 file changed

+132
-135
lines changed

‎react-hooks.mdx‎

Lines changed: 132 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -44,150 +44,147 @@ export const Counter = () => {
4444
<Counter />
4545
```
4646

47-
4847
### 2. Importing Components from Snippet Files
4948

5049
Import snippets into your MDX files to create reusable interactive components. Store snippets in the `snippets` folder for better organization. Learn more in the [reusable snippets documentation](/reusable-snippets).
5150

5251
*Interactive HSL color generator created with multiple React hooks*
5352

54-
5553
<ColorGenerator />
5654

57-
<Steps>
58-
<Step title="Create a snippet file">
59-
Create a new file in the `snippets` folder with your component code.
60-
61-
```jsx /snippets/color-generator.mdx [expandable]
62-
export const ColorGenerator = () => {
63-
const [hue, setHue] = useState(180)
64-
const [saturation, setSaturation] = useState(50)
65-
const [lightness, setLightness] = useState(50)
66-
const [colors, setColors] = useState([])
67-
68-
useEffect(() => {
69-
const newColors = []
70-
for (let i = 0; i < 5; i++) {
71-
const l = Math.max(10, Math.min(90, lightness - 20 + i * 10))
72-
newColors.push(`hsl(${hue}, ${saturation}%, ${l}%)`)
73-
}
74-
setColors(newColors)
75-
}, [hue, saturation, lightness])
76-
77-
const copyToClipboard = (color) => {
78-
navigator.clipboard
79-
.writeText(color)
80-
.then(() => {
81-
console.log(`Copied ${color} to clipboard!`)
82-
})
83-
.catch((err) => {
84-
console.error("Failed to copy: ", err)
85-
})
86-
}
87-
88-
return (
89-
<div className="p-4 border dark:border-zinc-950/80 rounded-xl bg-white dark:bg-zinc-950/80 shadow-sm">
90-
<span className="text-xl mb-4 font-semibold text-zinc-950/80 dark:text-white/80">HSL Color Generator</span>
91-
92-
<div className="space-y-4">
93-
<div className="space-y-2">
94-
<label className="block text-sm text-zinc-950/70 dark:text-white/70">
95-
Hue: {hue}°
96-
<input
97-
type="range"
98-
min="0"
99-
max="360"
100-
value={hue}
101-
onChange={(e) => setHue(Number.parseInt(e.target.value))}
102-
className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
103-
style={{
104-
background: `linear-gradient(to right,
105-
hsl(0, ${saturation}%, ${lightness}%),
106-
hsl(60, ${saturation}%, ${lightness}%),
107-
hsl(120, ${saturation}%, ${lightness}%),
108-
hsl(180, ${saturation}%, ${lightness}%),
109-
hsl(240, ${saturation}%, ${lightness}%),
110-
hsl(300, ${saturation}%, ${lightness}%),
111-
hsl(360, ${saturation}%, ${lightness}%))`,
112-
}}
113-
/>
114-
</label>
115-
116-
<label className="block text-sm text-zinc-950/70 dark:text-white/70">
117-
Saturation: {saturation}%
118-
<input
119-
type="range"
120-
min="0"
121-
max="100"
122-
value={saturation}
123-
onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
124-
className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
125-
style={{
126-
background: `linear-gradient(to right,
127-
hsl(${hue}, 0%, ${lightness}%),
128-
hsl(${hue}, 50%, ${lightness}%),
129-
hsl(${hue}, 100%, ${lightness}%))`,
130-
}}
131-
/>
132-
</label>
133-
134-
<label className="block text-sm text-zinc-950/70 dark:text-white/70">
135-
Lightness: {lightness}%
136-
<input
137-
type="range"
138-
min="0"
139-
max="100"
140-
value={lightness}
141-
onChange={(e) => setLightness(Number.parseInt(e.target.value))}
142-
className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
143-
style={{
144-
background: `linear-gradient(to right,
145-
hsl(${hue}, ${saturation}%, 0%),
146-
hsl(${hue}, ${saturation}%, 50%),
147-
hsl(${hue}, ${saturation}%, 100%))`,
148-
}}
149-
/>
150-
</label>
151-
</div>
152-
153-
<div className="flex space-x-1">
154-
{colors.map((color, idx) => (
155-
<div
156-
key={idx}
157-
className="h-16 rounded flex-1 cursor-pointer transition-transform hover:scale-105"
158-
style={{ backgroundColor: color }}
159-
title={`Click to copy: ${color}`}
160-
onClick={() => copyToClipboard(color)}
161-
/>
162-
))}
163-
</div>
164-
165-
<div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
166-
<p>
167-
Base color: hsl({hue}, {saturation}%, {lightness}%)
168-
</p>
169-
</div>
170-
</div>
171-
</div>
172-
)
55+
#### Create a snippet file
56+
57+
Create a new file in the `snippets` folder with your component code.
58+
59+
```jsx /snippets/color-generator.mdx [expandable]
60+
export const ColorGenerator = () => {
61+
const [hue, setHue] = useState(180)
62+
const [saturation, setSaturation] = useState(50)
63+
const [lightness, setLightness] = useState(50)
64+
const [colors, setColors] = useState([])
65+
66+
useEffect(() => {
67+
const newColors = []
68+
for (let i = 0; i < 5; i++) {
69+
const l = Math.max(10, Math.min(90, lightness - 20 + i * 10))
70+
newColors.push(`hsl(${hue}, ${saturation}%, ${l}%)`)
17371
}
174-
```
175-
</Step>
176-
<Step title="Import the snippet">
177-
Add an import statement at the top of your MDX file:
178-
179-
```jsx
180-
import { ColorGenerator } from "/snippets/color-generator.mdx"
181-
```
182-
</Step>
183-
<Step title="Use the component">
184-
<p>Add the component to your MDX content wherever needed:</p>
185-
186-
```jsx
187-
<ColorGenerator />
188-
```
189-
</Step>
190-
</Steps>
72+
setColors(newColors)
73+
}, [hue, saturation, lightness])
74+
75+
const copyToClipboard = (color) => {
76+
navigator.clipboard
77+
.writeText(color)
78+
.then(() => {
79+
console.log(`Copied ${color} to clipboard!`)
80+
})
81+
.catch((err) => {
82+
console.error("Failed to copy: ", err)
83+
})
84+
}
85+
86+
return (
87+
<div className="p-4 border dark:border-zinc-950/80 rounded-xl bg-white dark:bg-zinc-950/80 shadow-sm">
88+
<span className="text-xl mb-4 font-semibold text-zinc-950/80 dark:text-white/80">HSL Color Generator</span>
89+
90+
<div className="space-y-4">
91+
<div className="space-y-2">
92+
<label className="block text-sm text-zinc-950/70 dark:text-white/70">
93+
Hue: {hue}°
94+
<input
95+
type="range"
96+
min="0"
97+
max="360"
98+
value={hue}
99+
onChange={(e) => setHue(Number.parseInt(e.target.value))}
100+
className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
101+
style={{
102+
background: `linear-gradient(to right,
103+
hsl(0, ${saturation}%, ${lightness}%),
104+
hsl(60, ${saturation}%, ${lightness}%),
105+
hsl(120, ${saturation}%, ${lightness}%),
106+
hsl(180, ${saturation}%, ${lightness}%),
107+
hsl(240, ${saturation}%, ${lightness}%),
108+
hsl(300, ${saturation}%, ${lightness}%),
109+
hsl(360, ${saturation}%, ${lightness}%))`,
110+
}}
111+
/>
112+
</label>
113+
114+
<label className="block text-sm text-zinc-950/70 dark:text-white/70">
115+
Saturation: {saturation}%
116+
<input
117+
type="range"
118+
min="0"
119+
max="100"
120+
value={saturation}
121+
onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
122+
className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
123+
style={{
124+
background: `linear-gradient(to right,
125+
hsl(${hue}, 0%, ${lightness}%),
126+
hsl(${hue}, 50%, ${lightness}%),
127+
hsl(${hue}, 100%, ${lightness}%))`,
128+
}}
129+
/>
130+
</label>
131+
132+
<label className="block text-sm text-zinc-950/70 dark:text-white/70">
133+
Lightness: {lightness}%
134+
<input
135+
type="range"
136+
min="0"
137+
max="100"
138+
value={lightness}
139+
onChange={(e) => setLightness(Number.parseInt(e.target.value))}
140+
className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
141+
style={{
142+
background: `linear-gradient(to right,
143+
hsl(${hue}, ${saturation}%, 0%),
144+
hsl(${hue}, ${saturation}%, 50%),
145+
hsl(${hue}, ${saturation}%, 100%))`,
146+
}}
147+
/>
148+
</label>
149+
</div>
150+
151+
<div className="flex space-x-1">
152+
{colors.map((color, idx) => (
153+
<div
154+
key={idx}
155+
className="h-16 rounded flex-1 cursor-pointer transition-transform hover:scale-105"
156+
style={{ backgroundColor: color }}
157+
title={`Click to copy: ${color}`}
158+
onClick={() => copyToClipboard(color)}
159+
/>
160+
))}
161+
</div>
162+
163+
<div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
164+
<p>
165+
Base color: hsl({hue}, {saturation}%, {lightness}%)
166+
</p>
167+
</div>
168+
</div>
169+
</div>
170+
)
171+
}
172+
```
173+
174+
#### Import the snippet
175+
Add an import statement at the top of your MDX file:
176+
177+
```jsx
178+
import { ColorGenerator } from "/snippets/color-generator.mdx"
179+
```
180+
181+
#### Use the component
182+
183+
Add the component to your MDX content wherever needed:
184+
185+
```jsx
186+
<ColorGenerator />
187+
```
191188

192189
## Important Considerations
193190

0 commit comments

Comments
 (0)