• React hooks
  • useLazyScrolling
  • useObjectState
• React components
  • If
  • Media query
• Utils
  • timeAgo

React hooks

useLazyScrolling

Lazy loading images

const [Intersector] = useLazyLoading({ initPage: 0, distance: "400px"}, (page) => {
    // do your api request using page parameter and update your state
    // note: set state only that way setState(pre=>[...pre,...newData])
  })
  return (
    <div>
      {/* rendering the data */}
      {data.map(item => {
        return <img src={item.imageLink} />
      })}
      {/* put the intersector at the end */}
      <Intersector />
    </div>
  )

useObjectState

Management of object state

const [object, setObject, reset] = useObjectState({name:"johndoe",isProfession:true})
    setObject("isProfession",false) 
    // updating one value
    
    setObject({name:"johnny",isProfession:false}) 
    // updating many values

    reset(null) 
    // put null in all the values

    // alternative way for forms 👇
    useObjectState(["name","email","password"])
    // adds the string values to the object and updates them with empty string

    useObjectState(["name","email","password",{isFriendly:true,gender:null}])
    // use the alternative way and and set specific values👇

React components

If

<If condition={true}>
    <Menu>
</If>

Media query

  <MediaQuery minWidth={500} maxWidth={800} >
      <Menu>
  </MediaQuery>

Utils

timeAgo

Time ago function

timeAgo(Date.now(), "En") //At this moment
timeAgo(Date.now()-(1000*60), "En") //One minute ago
timeAgo(Date.now()-(2000*60), "En") //Before two minutes