5 个最热门的 React 库

React

1、React Hot Toast

地址：https://react-hot-toast.com/
它是一个易于使用、可访问且完全可定制，它文件小，因此，在应用程序中占有一席之地。

import toast, { Toaster } from "react-hot-toast";
const App = () => {
  return (
    <>
      <Toaster/>
      <button onClick={() => toast.success('Yay!')}>Click me!</button>
    </>
  )
};

2、Jotai

地址：https://jotai.pmnd.rs/
这个令人难以置信的软件也很小，只有 6kb，几乎不会注意到它的存在！

import { atom, useAtom } from "jotai";
const counterAtom = atom(0);
const App = () => {
  const [counter, setCounter] = useAtom(counterAtom);
  return (
    <>
      <p>{counter}</p>
    </>
  );
}

使用 Jotai，可以创建原子的微小状态容器。 然后可以在整个应用程序的其余部分读取和设置这些原子。
由于在整个应用程序中使用相同的原子，因此，所有内容都始终是最新的。 不再为过时的状态而苦苦挣扎！

3、Framer Motion

地址：https://www.framer.com/motion/
这个非常不错的动画库。 它能创建运行流畅的动画。 甚至不需要 CSS 来编写它们！
无论动画多么复杂，它也能够毫不费力地运行它！ 凭借其简单的 API 和出色的文档，可以立即开始运行。

import { motion } from "framer-motion"
export const MyComponent = () => (
  <motion.div
    animate={{ scale: 2 }}
    transition={{ duration: 0.5 }}
  />
)

甚至可以为组件的进入和退出设置动画。

import { motion, AnimatePresence } from "framer-motion"
export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible && (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  </AnimatePresence>
)

4、React-Hook-Form

地址：https://react-hook-form.com/
当必须处理和验证用户输入时，这将节省大量时间。React-hook-form 直接嵌入到模式验证库中，并随时随地验证用户的输入。 确保只有在所有正确数据都存在时，才能提交表单的完美方式！

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import Headers from "./Header";
export default function App() {
  const { register, handleSubmit } = useForm();
  const [result, setResult] = useState("");
  const onSubmit = (data) => setResult(JSON.stringify(data));
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Headers />
      <input {...register("firstName")} placeholder="First name" />
      <input {...register("lastName")} placeholder="Last name" />
      <select {...register("category")}>
        <option value="">Select...</option>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
      </select>
      <p>{result}</p>
      <input type="submit" />
    </form>
  );
}

React-hook-form 的主要目标是减少需要编写的代码量以使其工作。 老实说，谁不梦想编写更少的代码？

5、Chakra-UI

地址：https://chakra-ui.com/
Chakra 是一个简单而现代的组件套件，可在几分钟内创建一个前端！ 他们的预制组件是完全可访问的，看起来非常干净。

import * as React from "react";
import { Box, Image, Flex, Badge, Text } from "@chakra-ui/react";
import { MdStar } from "react-icons/md";
export default function Example() {
  return (
    <Box p="5" maxW="320px" borderWidth="1px">
      <Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
      <Flex align="baseline" mt={2}>
        <Badge colorScheme="pink">Plus</Badge>
        <Text
          ml={2}
          textTransform="uppercase"
          fontSize="sm"
          fontWeight="bold"
          color="pink.800"
        >
          Verified &bull; Cape Town
        </Text>
      </Flex>
      <Text mt={2} fontSize="xl" fontWeight="semibold" lineHeight="short">
        Modern, Chic Penthouse with Mountain, City & Sea Views
      </Text>
      <Text mt={2}>$119/night</Text>
      <Flex mt={2} align="center">
        <Box as={MdStar} color="orange.400" />
        <Text ml={1} fontSize="sm">
          <b>4.84</b> (190)
        </Text>
      </Flex>
    </Box>
  );
}

他们直观的 API 还可以轻松添加自己的样式并真正创建独特的作品！ 由于不断重复使用 Chakra 提供的相同组件，UI 将在整个应用程序中看起来连贯和干净！