Rn-simple-hooks NPM

Installation

run this command in your root project

yarn add rn-simple-hooks

npm install rn-simple-hooks --save

Usage

1: useToggle

 import { useToggle } from 'rn-simple-hooks'

# use a custom hook inside the functional component
const { value, toggle } = useToggle(false);

# Now handleToggleValue
const handleToggleValue = () => toggle()

2: useFetch

 import { useFetch } from 'rn-simple-hooks'

# use this hook to call a API
const { loading, data, error } = useFetch<MyData>('https://api.example.com/data')

3: useInterval

import {useInterval} from 'rn-simple-hooks'

...

useInterval(() => {
    console.log('useInterval');
  }, 1000);

...

4: useTimeout

import {useTimeout} from 'rn-simple-hooks'

...

const callMe = () => console.log("call me after 5 seconds")

useTimeout(callMe, 5000);

...

4: useSteps

import {useSteps} from 'rn-simple-hooks'

...
    const [currentStep, helpers] = useSteps(10);

    const { canGoToPrevStep, canGoToNextStep, goToNextStep, goToPrevStep, reset, setStep } = helpers;


      <Text>Current step is {currentStep}</Text>
      <Text>Can go to previous step {canGoToPrevStep ? 'Yes' : 'No'}</Text>
      <Text>Can go to next step {canGoToNextStep ? 'Yes' : 'No'}</Text>
      <Button onPress={goToNextStep} title={'Go to next step'} />
      <Button onPress={goToPrevStep} title={'Go to previous step'} />
      <Button onPress={reset} title={'Reset'} />
      <Button onPress={() => setStep(5)} title={'Set to step 5'} />

...

5: useDebounce

import { useDebounce } from 'rn-simple-hooks';

...
  const [value, setValue] = React.useState<string>('');

  const debouncedValue = useDebounce<string>(value, 500);

  const handleChanges = (text: string) => {
    setValue(text);
  };


   React.useEffect(() => {
    // Do somtheing here. like call search API
  }, [debouncedValue]);


      <Text>Value real-time: {value}</Text>
      <Text>Debounced value: {debouncedValue}</Text>
      <TextInput value={value} onChangeText={handleChanges} placeholder="Type something..." />

6: useIsFirstRender

import { useIsFirstRender } from 'rn-simple-hooks';

... 

const isFirst = useIsFirstRender();
 const [data, setData] = React.useState<number>(0);

 React.useEffect(() => {
   console.log('Test render ', { data }, isFirst);
 }, [data]);

     <Text>Open your console {isFirst}</Text>
     <Text>Is first render: {isFirst ? 'yes' : 'no'}</Text>
     <Button onPress={() => setData(Date.now())} title={'Update Data'} />
...