Skip to content

hackape/fn-with-hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fn-with-hooks

Credit to https://github.com/getify/TNG-Hooks. This lib is basically a re-implementation of TNG-Hooks in Typescript, with APIs aligned to React's hooks!

React's hooks ported to plain functions.

Usage

Live demo

import { withHooks, useState, useEffect, reset, useReducer, useMemo } from 'fn-with-hooks'

const foobar = withHooks((plus=0) => {
  const [count, setCount] = useState(0)
  console.log(count)
  useEffect(() => {
    setCount(count + plus)
  }, [count])
})

foobar(1)
foobar(3)
foobar(5)

reset(foobar)

foobar(7)
foobar()


function reducer(state, action) {
  if (action.type === 'inc') {
    return { ...state, count: state.count+1 }
  }
  return state
}

const zoo = withHooks(() => {
  const [state, dispatch] = useReducer(reducer, { count: 0 })
  console.log('check current state', state)

  const chance = Math.random()
  if (chance > 0.5) {
    dispatch({ type: 'inc' })
  }

  console.log('check the chance', useMemo(() => chance, [state]))
})

zoo()
zoo()
zoo()
zoo()

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published