ðž7ã€ã®Reactããã¯ãç¥ã£ãŠããå¿ èŠããããŸãðž
React Hooksã¯ãReactãããžã§ã¯ãã§ã³ãŒããåå©çšããã®ãããç°¡åã«ããç¹å¥ãªæ©èœã§ãã7ã€ã®éèŠãªReact Hooksããã¹ãŠã®ãããžã§ã¯ãã§äœ¿çšã§ããŸãããããã®Hooksã¯ãReactã¢ããªã«åœ¹ç«ã€å€ãã®æ©èœãæã€@mantine/hooks
ãšããã©ã€ãã©ãªããæ¥ãŠããŸãã
useIntersection
ããã¯
ã¢ããªã䜿ããšããæã ããŒãžãäžã«ã¹ã¯ããŒã«ããŸããã¢ããªã¯ããããã®ãããŒãžã«èŠãããšããç¥ããããããããŸãããäŸãã°ããããã®ãèŠãããšãã«ã¢ãã¡ãŒã·ã§ã³ãå§ããããšããããŒãžãããçšåºŠäžã«ã¹ã¯ããŒã«ããåŸã«äœãã衚瀺ãããé ãããããããšãã
æã
ã¯ãIntersection Observer APIã䜿ã£ãŠãç»é¢äžã«äœããèŠãããã©ãããç¥ãããšãã§ããŸããããã¯ããŠã§ããã©ãŠã¶ã«çµã¿èŸŒãŸããç¹å¥ãªJavaScriptã§ãããããåç¬ã§äœ¿ãããšããuseIntersection
ããã¯ã䜿ã£ãŠãã¹ã¯ããŒã«ãããšãã«èŠããé åã«ããç¹å®ã®èŠçŽ ã«é¢ããæ
å ±ãååŸããããšãã§ããŸãã
import { useRef } from 'react';
import { useIntersection } from '@mantine/hooks';
function Demo() {
const containerRef = useRef();
const { ref, entry } = useIntersection({
root: containerRef.current,
threshold: 1,
});
return (
<main ref={containerRef} style={{ overflowY: 'scroll', height: 300 }}>
<div ref={ref}>
<span>
{entry?.isIntersecting ? 'Fully visible' : 'Obscured'}
</span>
</div>
</main>
);
}
ã¹ã¯ããŒã«ã³ã³ãããŒå ã®èŠçŽ ã衚瀺ãããŠãããã©ããã远跡ããããã«ãç¹å¥ãªããã¯ã䜿ãããšãã§ããŸããããã¯ã«ã¯ãã¹ã¯ããŒã«ã³ã³ãããŒãšè¿œè·¡ãããèŠçŽ ãžã®åç §ãäžããå¿ èŠããããŸãããããããšãèŠçŽ ã衚瀺ãããŠãããã©ãããæããŠãããŸãããŸããèŠçŽ ã®ã©ã®ãããã衚瀺ãããŠãããã調æŽããããšãã§ããŸãã
useScrollLock
ããã¯
ãã®ããã¯ã¯ãã¹ã¯ãªãŒã³äžã«è¡šç€ºãããã®ã人ã ãã¹ã¯ããŒã«ããŠããŸããªãããã«ãããšãã«åœ¹ç«ã¡ãŸããããŒãžã®äžäžãã¹ã¯ããŒã«ããããšãé²ãã泚ç®ãã¹ããã®ã«éäžããããšãã§ããŸãããŸããç¹å¥ãªãšãªã¢ãã¹ã¯ããŒã«ã§ããããã«ããããšãã§ããŸãã®ã§ãããŒãžå ãåãåãããšãã§ããŸãã
import { useScrollLock } from '@mantine/hooks';
import { Button, Group } from '@mantine/core';
import { IconLock, IconLockOpen } from '@tabler/icons';
function Demo() {
const [scrollLocked, setScrollLocked] = useScrollLock();
return (
<Group position="center">
<Button
onClick={() => setScrollLocked((c) => !c)}
variant="outline"
leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />}
>
{scrollLocked ? 'Unlock scroll' : 'Lock scroll'}
</Button>
</Group>
);
}
useScrollLock
ã¯ãããŒãžäžã®äœçœ®ãä¿ã€æ¹æ³ã§ããã¹ã¯ããŒã«ãããã¯ãããŠãããã©ãããæããŠãããŸããã¹ã¯ããŒã«ãããã¯ãããŠãããšãã«ç°ãªãã³ã³ãã³ãã衚瀺ããããã«äœ¿ãããšãã§ããŸããäŸãã°ãã¹ã¯ããŒã«ãããã¯ãããŠããããšã瀺ãã¡ãã»ãŒãžã衚瀺ããããã«äœ¿ãããšãã§ããŸãã
useClipboard
ããã¯
ã¯ãªããããŒãAPIã䜿ãã°ããŠã§ããµã€ãããäœããã³ããŒããã®ãç°¡åã«ãªããŸããuseClipboard
ããã¯ã䜿ããšãã³ãŒãã¹ãããããä»ã®ããã¹ããã³ããŒããããã®ã³ããŒé¢æ°ã䜿ããŸãããã®ããã«ããŠã人ã
ã¯ç°¡åã«ããã¹ããã³ããŒããŠãã©ãã«ã§ã貌ãä»ããããšãã§ããŸãã
ã³ããŒãã¿ã³ãæŒããšãã³ãŒãã¹ããããã®ã³ããŒãäœæããã³ããŒãå®äºããããšã瀺ããã§ãã¯ããŒã¯ã衚瀺ããŸããã³ããŒãã¿ã³ã«ã¯ãäžå®æéãçµéãããšã¿ã€ããŒããªã»ãããããããã¹ããå床ã³ããŒã§ããããã«ãªã£ãŠããŸãã
useDebouncedValue
ããã¯
ã¢ããªã«æ€çŽ¢ããã¯ã¹ãããå ŽåãuseDebouncedValue
ã¯åœ¹ã«ç«ã€ããŒã«ã§ããããã¯ã人ãæ€çŽ¢ããã¯ã¹ã«å
¥åããŠããéã«ãããŸãã«ãå€ãã®ãªã¯ãšã¹ããéä¿¡ããªãããã«ããŸãã代ããã«ã人ãå
¥åãçµãããŸã§åŸ
ã¡ãŸããããã«ãããã¢ããªãããŸãã«ãå€ãã®ãªã¯ãšã¹ããéä¿¡ããªãããã«ããæ€çŽ¢çµæãããæ£ç¢ºã«ãªãããã«ããŸãã
import { useState } from 'react';
import { useDebouncedValue } from '@mantine/hooks';
import { getResults } from 'api';
function Demo() {
const [value, setValue] = useState('');
const [results, setResults] = useState([])
const [debounced] = useDebouncedValue(value, 200); // wait time of 200 ms
useEffect(() => {
if (debounced) {
handleGetResults()
}
async function handleGetResults() {
const results = await getResults(debounced)
setResults(results)
}
}, [debounced])
return (
<>
<input
label="Enter search query"
value={value}
style={{ flex: 1 }}
onChange={(event) => setValue(event.currentTarget.value)}
/>
<ul>{results.map(result => <li>{result}</li>}</ul>
</>
);
}
ããªããå ¥åããæåãç¹å¥ãªå Žæãã¹ããŒãã«ä¿åããããšãã§ããŸãããŸããç¹å¥ãªå Žæã«å ¥åããæåãéä¿¡ãããŸã§ã«ããçšåºŠã®æéãåŸ ã€ããã«æ瀺ããããšãã§ããŸãããã®ããã«ãããšãããªããå ¥åããæåãããŸãé »ç¹ã«éä¿¡ããå¿ èŠããªããªããŸãã200ããªç§åŸã«å ¥åããæåã衚瀺ããããšããããšãããããªã§èŠãããšãã§ããŸãã
useMediaQuery
ããã¯
useMediaQuery
ããã¯ã¯ãç»é¢ã®ãµã€ãºã«å¿ããŠäœãã®èŠãç®ãå€ããã®ãå©ããŠãããŸããäŸãã°ãç»é¢ã900ãã¯ã»ã«ã®å¹
ãªããããã¯ã䜿ã£ãŠäœãã®èŠãç®ãå€ããããšãã§ããŸããããã¯ã¯ãç§ãã¡ãæ±ããç»é¢ãµã€ãºãšäžèŽããŠãããã©ãããæããŠãããã®ã§ãäœãã®èŠãç®ãå€ããããšãã§ããŸãã
import { useMediaQuery } from '@mantine/hooks';
function Demo() {
const matches = useMediaQuery('(min-width: 900px)');
return (
<div style={{ color: matches ? 'teal' : 'red' }}>
{matches ? 'I am teal' : 'I am red'}
</div>
);
}
ããã¯ãè²ããµã€ãºãªã©ã®èŠãç®ãå€ããããã«JavaScriptã䜿ãããšãã§ãããšããããšã§ãããããè¡ãããã«ã¯ãstyle
ããããã£ã䜿ãããšãã§ããŸãã
CSSã䜿ã£ãŠããã€ã¹ããšã«èŠãç®ãå€ããããšãã§ããªãå Žåããã®ãã®ã圹ç«ã€ããšããããŸãã
useClickOutside
ããã¯
ãã®ããã¯ã¯ããããã¢ãããªã©ã®èŠçŽ ã®å€ãã¯ãªãã¯ãããšãã«ãèªåçã«éããããã«ããã®ãå©ããŠãããŸãããããã¢ããã®å€ãã¯ãªãã¯ãããšãã«èªåçã«éããããã«ããæ¹æ³ã®ãããªãã®ã§ãã
import { useState } from 'react';
import { useClickOutside } from '@mantine/hooks';
function Demo() {
const [opened, setOpened] = useState(false);
const ref = useClickOutside(() => setOpened(false));
return (
<>
<button onClick={() => setOpened(true)}>Open dropdown</button>
{opened && (
<div ref={ref} shadow="sm">
<span>Click outside to close</span>
</div>
)}
</>
);
}
ããèŠçŽ ã®å€ãã¯ãªãã¯ãããšãuseClickOutside
ãç¹å¥ãªé¢æ°ãå®è¡ããŸãããã®é¢æ°ã¯ã¢ããªã«äœãããããäŒããŸããéåžžããã®é¢æ°ã¯èŠçŽ ãéããããã«ããŸãããã®ããã«ãã¢ããªã«ïŒsetOpened
ã®ãããªïŒã³ãã³ããäžããŠãèŠçŽ ãéããããã«ããå¿
èŠããããŸãã
useForm
ããã¯
ç§ã®ãæ°ã«å
¥ãã®ããã¯ã¯ãReactã§ãã©ãŒã ãäœæããã®ã«åœ¹ç«ã¡ãŸããããã¯useForm
ãšããååã§ãMantineããæ¥ãŠããŸããããã䜿ãããã«ã@mantine/form
ãšããã©ã€ãã©ãªããããã±ãŒãžãã€ã³ã¹ããŒã«ããå¿
èŠããããŸããããã¯ããã©ãŒã ã«å
¥åããæ
å ±ãæ£ãããã©ããã確èªããã®ã«åœ¹ç«ã¡ãŸãããŸããå
¥åãæ€èšŒããŠãšã©ãŒã¡ãã»ãŒãžã衚瀺ããã®ã«ã圹ç«ã¡ãŸãããã©ãŒã ã®å
¥åãšäžèŽããåæå€ãäžããããšãã§ããŸãã
import { TextInput, Button } from '@mantine/core';
import { useForm } from '@mantine/form';
function Demo() {
const form = useForm({
initialValues: {
email: ''
},
validate: {
email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
},
});
return (
<div>
<form onSubmit={form.onSubmit((values) => console.log(values))}>
<TextInput
withAsterisk
label="Email"
placeholder="your@email.com"
{...form.getInputProps('email')}
/>
<Button type="submit">Submit</Button>
</form>
</div>
);
}
useForm
ã«ã¯ãããªããŒãæ©èœãšããç¹å¥ãªæ©èœããããŸãããã©ãŒã ã®åããã¯ã¹ã«å
¥åãããå
容ãèŠãŠãæ£ãããã©ããããã§ãã¯ããŸããäŸãã°ãã¡ãŒã«ã¢ãã¬ã¹ãå
¥åããå ŽåãããªããŒãæ©èœã¯ãããæ¬åœã®ã¡ãŒã«ã¢ãã¬ã¹ãã©ããã確èªããŸããæ£ãããªãå Žåã¯ããšã©ãŒã¡ãã»ãŒãžã衚瀺ããŠããã©ãŒã ãéä¿¡ã§ããªãããã«ããŸãã
ãã©ãŒã ãå ¥åããå ŽåãUseFormã¯ãå ¥åããå€ã远跡ããŠãã©ãŒã ãæ£ããå ¥åãããŠãããã確èªããã®ã«åœ¹ç«ã€ããŒã«ã§ããã«ãŒã«ãæºãããŠããªãå Žåã¯ãã©ãŒã ãéä¿¡ããã®ãé²ãã®ã«ã圹ç«ã¡ãŸãããã©ãŒã ã®å ¥åãç°¡åã«ããŠããã¹ãŠãæ£ããè¡ãããŠããããšã確èªããã®ã«åœ¹ç«ã¡ãŸãã
Mình hy vá»ng bạn thÃch bà i viết nà y và há»c thêm Äược Äiá»u gì Äó má»i.
Donate mình má»t ly cafe hoặc 1 cây bút bi Äá» mình có thêm Äá»ng lá»±c cho ra nhiá»u bà i viết hay và chất lượng hÆ¡n trong tÆ°Æ¡ng lai nhé. à mà nếu bạn có bất kỳ câu há»i nà o thì Äừng ngại comment hoặc liên há» mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm Æ¡n.
Momo: NGUYá»N ANH TUẀN - 0374226770
TPBank: NGUYá»N ANH TUẀN - 0374226770 (hoặc 01681423001)
All rights reserved