+8

🌞7぀のReactフックを知っおおく必芁がありたす🌞

React Hooksは、Reactプロゞェクトでコヌドを再利甚するのをより簡単にする特別な機胜です。7぀の重芁なReact Hooksをすべおのプロゞェクトで䜿甚できたす。これらのHooksは、Reactアプリに圹立぀倚くの機胜を持぀@mantine/hooksずいうラむブラリから来おいたす。

useIntersectionフック

アプリを䜿うずき、時々ペヌゞを䞋にスクロヌルしたす。アプリは、あるものがペヌゞに芋えるずきを知りたいかもしれたせん。䟋えば、あるものが芋えるずきにアニメヌションを始めたいずか、ペヌゞをある皋床䞋にスクロヌルした埌に䜕かを衚瀺したり隠したりしたいずか。

0_ovJtOOaaf3U_cs7m.gif

我々は、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は、ペヌゞ䞊の䜍眮を保぀方法です。スクロヌルがロックされおいるかどうかを教えおくれたす。スクロヌルがロックされおいるずきに異なるコンテンツを衚瀺するために䜿うこずができたす。䟋えば、スクロヌルがロックされおいるこずを瀺すメッセヌゞを衚瀺するために䜿うこずができたす。

0_RyT3uf-gAhxnjURy.gif

useClipboardフック

クリップボヌドAPIを䜿えば、りェブサむトから䜕かをコピヌするのが簡単になりたす。useClipboardフックを䜿うず、コヌドスニペットや他のテキストをコピヌするためのコピヌ関数を䜿えたす。このようにしお、人々は簡単にテキストをコピヌしお、どこにでも貌り付けるこずができたす。

0_VM8Aef0vDgrq2s8H.gif

コピヌボタンを抌すず、コヌドスニペットのコピヌを䜜成し、コピヌが完了したこずを瀺すチェックマヌクを衚瀺したす。コピヌボタンには、䞀定時間が経過するずタむマヌがリセットされ、テキストを再床コピヌできるようになっおいたす。

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ミリ秒埌に入力した文字が衚瀺されるずいうこずが、ビデオで芋るこずができたす。

0_h2ERrCEnyadP2Bkk.gif

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プロパティを䜿うこずができたす。

0_7pHrwX5tMZ04YtWw.gif

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のようなコマンドを䞎えお、芁玠を閉じるようにする必芁がありたす。

0_XlbDwxfqaG6rfVqH.gif

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には、バリデヌト機胜ずいう特別な機胜がありたす。フォヌムの各ボックスに入力された内容を芋お、正しいかどうかをチェックしたす。䟋えば、メヌルアドレスを入力した堎合、バリデヌト機胜はそれが本圓のメヌルアドレスかどうかを確認したす。正しくない堎合は、゚ラヌメッセヌゞを衚瀺しお、フォヌムを送信できないようにしたす。

0_qUzSum0apXSrv6au.gif

フォヌムを入力する堎合、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)

image.png


All rights reserved

Viblo
Hãy đăng kÃœ một tài khoản Viblo để nhận được nhiều bài viết thú vị hÆ¡n.
Đăng kí