https://github.com/minsion/react-commonhooks

React中常用的hooks函数（commonly used hooks functions in react）
https://github.com/minsion/react-commonhooks

Last synced: 24 days ago
JSON representation

React中常用的hooks函数（commonly used hooks functions in react）

• Host: GitHub
• URL: https://github.com/minsion/react-commonhooks
• Owner: minsion
• Created: 2024-03-31T09:28:00.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-31T17:15:40.000Z (9 months ago)
• Last Synced: 2024-04-01T15:23:19.365Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 331 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

## install and start

```

yarn install

yarn start

```

Runs the app in the development mode Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

## 1.useFilter api



```

import { useState } from 'react';

// custome hooks, filter data

function useFilter(initialData) {

  const [filterText, setFilterText] = useState('');

  const [filteredData, setFilteredData] = useState(initialData);

 

  // update data when filter text changes

  const handleFilterChange = (event) => {

    const filterText = event.target.value;

    const filteredItems = initialData.filter((item) =>item.name.toLowerCase().includes(filterText.toLowerCase()))

    setFilterText(filterText);

    setFilteredData(filteredItems);

  };

  return { filterText, filteredData, handleFilterChange };

}

export default useFilter

```

## 2.useSort api



```

import { useState } from 'react';

// custome hooks, sort data

function useSort(initialData, initialKey = 'id', initialDirection = 'asc') {

  const [sortData, setData] = useState(initialData);

  const sortedDataByKey = (initKey, initDirection = 'asc') => {

    const sortedData = [...initialData].sort((a, b) => initDirection === 'asc' ? a[initKey] - b[initKey] : b[initKey] - a[initKey]);

    setData(sortedData);

  };

  return { sortData, sortedDataByKey };

}

export default useSort

```