react-hoa-utils v1.0.0

react-hoa-utils

react-hoa-utils là một thư viện React cung cấp các component và hook tái sử dụng, giúp tăng tốc quá trình phát triển ứng dụng React.

Giới thiệu

Thư viện này bao gồm các component UI và custom hook thường được sử dụng trong các dự án React. Các thành phần này được thiết kế với mục đích tái sử dụng, giúp giảm thiểu việc viết lại code và tăng tính nhất quán trong dự án của bạn.

Các thành phần

Component

• Counter: Một component đơn giản hiển thị một bộ đếm với các nút để tăng, giảm và đặt lại giá trị đếm.

import React from 'react';
import useCounter from '../hooks/useCounter';

interface CounterProps {}

const Counter: React.FC<CounterProps> = () => {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default Counter;

Hook

• useCounter: Một custom hook để quản lý state của một bộ đếm, cung cấp các hàm để tăng, giảm và đặt lại giá trị đếm.

import { useState } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState<number>(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};

export default useCounter;

Cài đặt

npm install react-hoa-utils

Sử dụng

import React from 'react';
import { Counter } from 'react-hoa-utils';

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};