Skip to main content

​
Overview

The useFilter hook provides access to the global filter context in the CryptoTracker application. It allows components to read and update filter criteria for searching and filtering cryptocurrencies by text, minimum price, and maximum price.
This hook must be used within a FilterProvider component. If used outside the provider, it will throw an error.

​
Signature

useFilter(): {
  filter: Filter;
  setFilter: React.Dispatch<React.SetStateAction<Filter>>;
}

​
Return Value

The hook returns an object with the following properties:
​
filter
Filter
The current filter state object containing:
  • text (string): Search text to filter by cryptocurrency name or symbol
  • minPrice (number | null): Minimum price filter in USD
  • maxPrice (number | null): Maximum price filter in USD
​
setFilter
React.Dispatch<React.SetStateAction<Filter>>
Function to update the filter state. Can accept either a new Filter object or a function that receives the previous state and returns a new state.

​
Filter Interface

The Filter type is defined as: 
interface Filter {
  text: string;
  minPrice: number | null;
  maxPrice: number | null;
}
​
text
string
Search string to match against cryptocurrency names and symbols. Case-insensitive matching is recommended.
​
minPrice
number | null
Minimum price threshold in USD. Set to null to disable minimum price filtering.
​
maxPrice
number | null
Maximum price threshold in USD. Set to null to disable maximum price filtering.

​
Usage Example

Here’s how the hook is used in the HomeScreen component to filter cryptocurrency data: 
import { useCryptoData } from '../hooks/useCryptoData';
import { useFilter } from '../context/FilterContext';

const HomeScreen = () => {
  const { data, loading, error } = useCryptoData();
  
  // Access the current filter state
  const { filter } = useFilter();

  // Apply filters to cryptocurrency data
  const filtered = data.filter((crypto) => {
    // Match by name or symbol
    const nameMatch = crypto.name.toLowerCase().includes(filter.text.toLowerCase());
    const symbolMatch = crypto.symbol.toLowerCase().includes(filter.text.toLowerCase());

    // Check price range
    const minOk = filter.minPrice === null || Number(crypto.price_usd) >= filter.minPrice;
    const maxOk = filter.maxPrice === null || Number(crypto.price_usd) <= filter.maxPrice;

    return (nameMatch || symbolMatch) && minOk && maxOk;
  });

  return (
    <ScrollView>
      {filtered.map((crypto) => (
        <CryptoCard key={crypto.id} crypto={crypto} />
      ))}
    </ScrollView>
  );
};

​
Context Provider

Before using this hook, wrap your application with the FilterProvider:
App.tsx
import { FilterProvider } from './context/FilterContext';

const App = () => {
  return (
    <FilterProvider>
      {/* Your app components */}
      <HomeScreen />
    </FilterProvider>
  );
};

​
Error Handling

If the hook is used outside of a FilterProvider, it will throw an error: 
Error: useFilter debe usarse dentro de FilterProvider
Make sure all components using this hook are descendants of the FilterProvider component.

​
Default Filter State

The filter is initialized with the following default values: 
{
  text: '',
  minPrice: null,
  maxPrice: null
}
This configuration shows all cryptocurrencies without any filters applied.

Build docs developers (and LLMs) love

Get started for freeTalk to us