React Powerhooks: Sử dụng các thành phần react-powerplug với React Hook

react-powerhooks

⚠️ Cảnh báo: hooks hiện chưa phải là một phần của phiên bản React ổn định, vì vậy chỉ sử dụng thư viện này cho các thử nghiệm

Demo

Cài đặt

yarn add react-powerhooks

Về

react-powerhooks là một bộ các react custom-hooks tương đương với các thành phần render props trong react-powerplug. Được cảm hứng mạnh mẽ từ react-hangers. Logo được lấy từ wikimedia commons.

API

useToggle

Đây là một hook cho phép bạn chuyển đổi giữa các giá trị boolean. Nó cần một initialValue để làm việc.

Sử dụng

const initialValue = true;
const [currentValue, toggleAway] = useToggle(initialValue);

useActive

Hook này cho phép bạn biết khi con trỏ chuột của bạn hoạt động trên một phần tử cụ thể. Nó cần một ref của phần tử được thảo luận để làm việc. Nó cũng có thể chấp nhận một onChange callback mà nó gọi mỗi khi trạng thái hoạt động thay đổi. Hàm onChange nhận trạng thái hoạt động hiện tại của phần tử dưới dạng giá trị boolean.

Sử dụng

const ref = useRef(null); // Use the ref in the element concerned.
// More about useRef here https://reactjs.org/docs/hooks-reference.html#useref
const activeValue = useActive({ refEl: ref });

useInterval

Hook này bắt đầu một bộ hẹn giờ khoảng thời gian có thể được tắt/bật lại bất kỳ lúc nào. Nó nhận vào startImmediate quyết định liệu khoảng thời gian có bật mặc định hay không. Nó cũng nhận vào time là thời gian của khoảng thời gian.

Nó cung cấp một phương thức start và stop cho phép chúng ta kiểm soát trạng thái của khoảng thời gian.

Sử dụng

const [time, setTime] = useState(null);
const { start, stop } = useInterval({
  duration: 1000,
  startImmediate: false,
  callback: () => {
    setTime(new Date().toLocaleTimeString());
  }
});

return (
  <Fragment>
    <div>The time is now {time}</div>
    <button onClick={() => stop()}>Stop interval</button>
    <button onClick={() => start()}>Start interval</button>
  </Fragment>
);

useMap

Hook này cho phép bạn sử dụng một đối tượng bản đồ và có các phương thức để thao tác với bản đồ. Nó cần một initialValue.

Sử dụng

const {
  set: setKey,
  get: getKey,
  has,
  delete: deleteKey,
  clear,
  reset,
  values
} = useMap({ name: "PK", age: "30", occupation: "Reactor" });

Thông tin tải về:

Tác giả: kalcifer
Nguồn: https://github.com/kalcifer/react-powerhooks