Awesome React Hooks - Mantine

#react #webdev #javascript #tutorial

Hello everyone, today we will be discussing React library Mantine, which is a fully featured Component library for React. But we will be covering the Hooks part of this library in this blog.

Mantine hooks library enhances the development experience by abstracting complex logic into reusable functions that can be easily incorporated into React components. These hooks cover various aspects of application development, including form handling, data fetching, and UI interactions.

We will be covering some hooks with examples, rest you can on the Mantine Documentation itself - https://mantine.dev/hooks/use-counter/

Example Sandbox -

1. useCounter() -

Starting from the simplest one, a hook to create a Counter.

import { Group, Button, Text } from '@mantine/core';
import { useCounter } from '@mantine/hooks';

function Demo() {
  const [count, handlers] = useCounter(0, { min: 0, max: 10 });

  return (
    <>
      <Text>Count: {count}</Text>
      <Group position="center">
        <Button onClick={handlers.increment}>Increment</Button>
        <Button onClick={handlers.decrement}>Decrement</Button>
        <Button onClick={handlers.reset}>Reset</Button>
        <Button onClick={() => handlers.set(5)}>Set 5</Button>
      </Group>
    </>
  );
}

This hook is simple, it gives 2 things, count value and a handler object which in turn have 4 methods - increment, decrement, reset, set.
we can pass 2 args, 1 is the initial value, second is an object with min and max value which the counter falls in, second param is an optional one.

2 useDebouncedState() -

This one is used to create a debouncing for an input, it receives 3 args - default value, waiting time, leading which is used to update the value immediately on first call.

import { useDebouncedState } from "@mantine/hooks";
import { TextInput, Text } from "@mantine/core";

function Debouncing() {
  const [value, setValue] = useDebouncedState("", 200, { leading: true });

  return (
    <div>
      <h1>Debouncing Hook</h1>
      <TextInput
        label="Enter value to see debounce effect"
        defaultValue={value}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Debounced value: {value}</Text>
    </div>
  );
}

export default Debouncing;

3 useDisclosure() -

This one is used to handle boolean states like toggle, open or close. This hook receives 2 args, one initial value, second is an object with 2 methods, onOpen() where you can add some functionality when the state is true, onClose() to add some functionality when the state is false. Apart from that it has 3 handler methods - open(), close() and toggle().

import { useDisclosure } from "@mantine/hooks";
import { Button, Space, Text, Flex } from "@mantine/core";

function Disclosure() {
  const [opened, handlers] = useDisclosure(false, {
    onOpen: () => console.log("Opened"),
    onClose: () => console.log("Closed")
  });

  return (
    <div className="Card">
      <h1>Disclosure hook</h1>
      <Text>State : {opened.toString()}</Text>
      <Space h="md" />
      <Flex gap="md">
        <Button color="violet" onClick={() => handlers.open()}>
          Open
        </Button>
        <Button color="red" onClick={() => handlers.close()}>
          close
        </Button>
        <Button color="green" onClick={() => handlers.toggle()}>
          toggle
        </Button>
      </Flex>
    </div>
  );
}

export default Disclosure;

4 useListState() -

This one is an awesome one as it helps with working with lists, we can add or delete items anywhere in the list, filter the list, reorder it, etc.

import { Group, Button, Text, Flex } from "@mantine/core";
import { useListState } from "@mantine/hooks";

function Counter() {
  const [values, handlers] = useListState([{ a: 1 }]);

  return (
    <div className="Card">
      <h1>Use List Hook</h1>

      <Flex gap="md">
        {values.map((value) => {
          return <Text>{value.a}</Text>;
        })}
      </Flex>

      <Group position="center">
        <Button onClick={() => handlers.prepend({ a: 3 }, { a: 4 })}>
          Prepend
        </Button>
        <Button onClick={() => handlers.append({ a: 5 }, { a: 6 })}>
          Append
        </Button>
        <Button onClick={() => handlers.insert(1, { a: 5 })}>
          Insert at second position
        </Button>
        <Button onClick={() => handlers.remove(0, 1)}>
          Remove first and second
        </Button>
        <Button onClick={() => handlers.filter((item) => item.a > 3)}>
          Filter greater than 3
        </Button>
      </Group>
    </div>
  );
}

export default Counter;

As you can see we have some handler method to use on List, as in React we have to use List very often, it is a great hook to use for your projects.

5 useToggle() -

It is a toggle hook which can be used to toggle between an array of items

import { Button, Text, Space } from "@mantine/core";
import { useToggle } from "@mantine/hooks";

function Toggle() {
  const [value, toggle] = useToggle(["blue", "orange", "cyan", "teal"]);

  return (
    <div className="Card">
      <h1>Toggle Hook</h1>
      <Text>
        You can toggle between these values "blue", "orange", "cyan", "teal"
      </Text>
      <Space h="md" />
      <Button color={value} onClick={() => toggle()}>
        {value}
      </Button>
    </div>
  );
}
export default Toggle;