use-set

use-set

Set을 React state로 사용할 수 있게 해 주는 훅이에요.

출처: 문서

본문

사용법 (Usage)

useSet 훅은 React state로 사용할 수 있는 Set 객체를 반환해요. add, clear, delete 메서드가 state 업데이트를 트리거해요.

import { useState } from 'react';
import { Code, Stack, TextInput } from '@mantine/core';
import { useSet } from '@mantine/hooks';

function Demo() {
  const [input, setInput] = useState('');
  const scopes = useSet(['@mantine', '@mantine-tests', '@mantinex']);

  const isDuplicate = scopes.has(input.trim().toLowerCase());

  const items = Array.from(scopes).map((scope) => {scope});

  return (
    <>
       setInput(event.currentTarget.value)}
        error={isDuplicate && 'Scope already exists'}
        onKeyDown={(event) => {
          if (event.nativeEvent.code === 'Enter' && !isDuplicate) {
            scopes.add(input.trim().toLowerCase());
            setInput('');
          }
        }}
      />

        {items}

  );
}

정의 (Definition)

function useSet(values?: T[]): Set;

더 알아보기 (Learn more)

• use-selection
• use-set-state