react-debug-hooks

Development tool to preview hooks state on Redux DevTools extension

Installation

Use npm to install react-debug-hooks

Make sure to have Redux DevTools extension installed on your browser!

1npm i react-debug-hooks

Usage

1import React from 'react'
2import ReactDOM from 'react-dom'
3import reactDebugHooks from 'react-debug-hooks'
4
5reactDebugHooks(React)
6
7ReactDOM.render(
8  <App />,
9  document.getElementById('root')
10)
11
12const App = () => {
13
14  const [state, setState] = React.useState({
15    loading: false,
16    users: [],
17    error: null
18  }, 'users') // you need to set a second parameter 'string' that will be shown on Redux devTools. 
19
20  React.useEffect(() => {
21
22    setState(state => ({...state, loading: true}))
23
24    getUsers()
25    .then(users => {
26      setState(state => ({...state, users, loading: false}))
27    })
28    .catch(error => {
29      setState(state => ({...state, error, loading: false}))
30    })
31
32  }, [])
33
34  return(
35    <>
36      {state.users.map(user => (
37        <p key={user.id}>{users.name}</p>
38      ))}
39    </>
40  )
41}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT