Custom Hooks

custom-hooks.markdown

Custom Hooks

A Pen by David Piruzashvili on CodePen.

License.

index.html

<div id="app">
</div>

script.babel

function useCustomHook(arg) {
  const [value, setValue] = React.useState(arg);
  const handler = {
    val1: 10,
    val2: -10
  }
  
  const onChangeInc = (i) => {
    if(value < handler.val1){
      setValue((value) => value + i);
    }
  }
  
   const onChangeDec = (i) => {
    if(value > handler.val2){
      setValue((value) => value + i);
    }
  }
   
   const onRenderNumber = () => {
     setValue(+(Math.random() * (10 - -10) + -10).toFixed(0));
   }
   
   const onResetValue = () => {
     setValue(arg);
   }
  return {value, onChangeInc, onChangeDec, onRenderNumber, onResetValue}
}

 


const Counter = (props) => {
  const calc = useCustomHook(props.counter);
  

  return (
    <div className="component">
      <div className="counter">{calc.value}</div>
      <div className="controls">
        <button onClick={() => calc.onChangeInc(1)}>INC</button>
        <button onClick={() => calc.onChangeDec(-1)}>DEC</button>
        <button onClick={calc.onRenderNumber}>RND</button>
        <button onClick={calc.onResetValue}>RESET</button>
      </div>
    </div>
  );
};

const RndCounter = (props) => {
  const calc2 =  useCustomHook(props.counter);
  


  return (
    <div className="component">
      <div className="counter">{calc2.value}</div>
      <div className="controls">
        <button onClick={calc2.onRenderNumber}>RND</button>
        <button onClick={calc2.onResetValue}>RESET</button>
      </div>
    </div>
  );
};


//service request getting promise

 const getRandomNumber = async (url) => {
  const res = await fetch(url);
  if(!res.ok){
  
    throw new Error(`Could not fetch ${url} status: ${res.status}`);
  }
  return await res.json();
 }
 
   const getData = async () => {
   return await getRandomNumber('https://www.random.org/integers/?num=1&min=-10&max=10&col=1&base=10&format=plain&rnd=new')

    }
    const getAnotherData = async () => {
   return await getRandomNumber('https://www.random.org/integers/?num=1&min=-10&max=10&col=1&base=10&format=plain&rnd=new')

    }
   
//data validation

const useGetRandomNumber = () => { 
  const [data, setData] = React.useState(0);
  const [data2, setData2] = React.useState(0);

   React.useEffect(() => {
  getData().then(data => setData(data))
  .catch(error => console.log('Ошибка', error));
      
   }, []);
  
  React.useEffect(() => {
  getAnotherData().then(res=> setData2(res))
  .catch(error => console.log('Ошибка', error));
      
   }, []);
   
  // console.log(data,data2);
  return  {data,data2};
}


const App = () => {
  const randomVal = useGetRandomNumber();
  
   if(randomVal.data === 0 || randomVal.data2 === 0) {
     return 'Loading...'
   }else{
     randomVal.data
     randomVal.data2
   }

  console.log(randomVal.data);
   console.log(randomVal.data2);

  

  return (
    <>
      <Counter counter={randomVal.data} />
      <RndCounter counter={randomVal.data2} />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

style.css

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
}

body {
  background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.component {
  width: 350px;
  height: 250px;
  background-color: #fff;
  margin: 50px auto 0 auto;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0,0,0, .2);
}

.counter {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0,0,0, .2);
  background-color: #e6e6e6;
  text-align: center;
  line-height: 100px;
  font-size: 34px;
  margin: 0 auto;
}

.controls {
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

.controls button {
  padding: 7px 12px;
  cursor: pointer;
  background-color: #6B7A8F;
  color: white;
}

Custom Hook