@mantine/utils

What is @mantine/utils?

@mantine/utils is a utility library that provides a collection of useful functions and hooks for React applications. It is part of the Mantine ecosystem, which is a set of tools and components designed to help developers build modern web applications with ease.

What are @mantine/utils's main functionalities?

useDebouncedValue

The useDebouncedValue hook allows you to debounce a value, which means it will only update after a specified delay. This is useful for scenarios like search input where you don't want to trigger a search on every keystroke.

import { useDebouncedValue } from '@mantine/hooks';

function MyComponent() {
  const [value, setValue] = useState('');
  const [debouncedValue] = useDebouncedValue(value, 200);

  useEffect(() => {
    // Do something with debouncedValue
  }, [debouncedValue]);

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

randomId

The randomId function generates a unique string identifier. This can be useful for creating unique keys for list items or other elements that require unique identifiers.

import { randomId } from '@mantine/utils';

const uniqueId = randomId();
console.log(uniqueId); // Outputs a unique string identifier

clamp

The clamp function restricts a number to be within a specified range. This is useful for ensuring that a value stays within a certain boundary.

import { clamp } from '@mantine/utils';

const clampedValue = clamp(10, 0, 5);
console.log(clampedValue); // Outputs 5

Other packages similar to @mantine/utils

lodash

Lodash is a popular utility library that provides a wide range of functions for common programming tasks such as manipulating arrays, objects, and strings. It is more comprehensive than @mantine/utils and is widely used in the JavaScript ecosystem.

date-fns

Date-fns is a utility library for working with dates in JavaScript. It provides a comprehensive set of functions for manipulating and formatting dates. While @mantine/utils offers some utility functions, date-fns is specialized and more feature-rich for date manipulation.

ramda

Ramda is a functional programming library for JavaScript that emphasizes immutability and side-effect-free functions. It provides a wide range of utility functions similar to @mantine/utils but with a focus on functional programming paradigms.

README

Mantine Hooks

A set of utils used in Mantine packages

View documentation

Installation

# With yarn
yarn add @mantine/utils

# With npm
npm install @mantine/utils

License

MIT