Moriss-React-Custom-Features

Description:

This is a React library offering reusable custom components and hooks. It provides:

• CustomInput: A basic input component for user interactions.
• SearchFiled: A search input component that optionally utilizes debounced API calls.
• useQuery: A custom React hook to simplify making API requests using Axios.
• useFilter: A custom React hook for filtering data based on a specified condition.

Features:

• Reusable components for common UI elements.
• Debounced API calls for optimized performance.
• Easy-to-use hook for API interactions.
• Data filtering with a customizable condition.

Installation:

npm install moriss-react-custom-features

Usage:

1. Import components and hooks:

   import CustomInput from 'moriss-react-custom-features/CustomInput';
   import SearchFiled from 'moriss-react-custom-features/SearchFiled';
   import useQuery from 'moriss-react-custom-features/useQuery';
   import useFilter from 'moriss-react-custom-features/useFilter';

2. Use the components and hooks:

   function MyComponent() {
     const [searchValue, setSearchValue] = useState('');
     const { results, isLoading, isError, error, fetchData } = useQuery(
       'https://api.example.com/data'
     );
   
     const { filteredData, isLoading: filterLoading, isError: filterError, error: filterErrorDetail, filterData } = useFilter(
       results.data,
       (item) => item.value > 10
     );
   
     return (
       <div>
         <CustomInput value={searchValue} setValue={setSearchValue} />
         <SearchFiled
           value={searchValue}
           setValue={setSearchValue}
           onSearch={() => console.log('Search:', searchValue)}
         />
         {isLoading && <p>Loading...</p>}
         {isError && <p>Error: {error.message}</p>}
         {filterLoading && <p>Filtering...</p>}
         {filterError && <p>Filter Error: {filterErrorDetail.message}</p>}
         {filteredData && (
           <pre>{JSON.stringify(filteredData, null, 2)}</pre>
         )}
         <button onClick={() => fetchData(true)}>Refresh Data</button>
       </div>
     );
   }

API Reference:

CustomInput:

• Props:
  • value: The current value of the input (string or number).
  • setValue: A function to update the value.
  • className: (optional) A CSS class to apply to the input element.
  • styles: (optional) An object of inline styles to apply to the input element.
  • id: The ID of the input element.

SearchFiled:

• Props:
  • All props of CustomInput.
  • onSearch: (optional) A function to be called when the user submits the search.
  • debouce: (optional, default: true) Whether to debounce the onSearch call.
  • delay: (optional, default: 500) The debounce delay in milliseconds.

useQuery:

• Props:

  • url: The URL of the API endpoint.
  • method: (optional, default: 'GET') The HTTP method (GET, POST, PATCH, DELETE, PUT).
  • body: (optional) The request body for methods like POST or PUT.
  • config: (optional) Additional configuration for the Axios request.

• Returns:

  • results: The response data from the API call (AxiosResponse object).
  • isLoading: Whether data is currently being fetched.
  • isError: Whether an error occurred during the request.
  • error: The error object if isError is true.
  • fetchData: A function to manually trigger a data fetch, optionally forcing a refresh.

useFilter:

• Params:

  • data: The array of data to be filtered.
  • filterCondition: The filtering function that determines whether an item should be included.
  • caching: (optional, default: true) Flag to enable caching of filtered data.

• Returns:

  • filteredData: The array of data that satisfies the filtering condition.
  • isLoading: Indicates whether the data is currently being fetched.
  • isError: Indicates whether an error occurred during the data fetching process.
  • error: The error object, if an error occurred.
  • filterData: Function to manually trigger data filtering with optional refresh and custom filter callback.

Feel free to customize the documentation further based on your preferences and additional details you'd like to include.