https://github.com/nitaking/react-hooks-logger

https://github.com/nitaking/react-hooks-logger

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/nitaking/react-hooks-logger
• Owner: nitaking
• Created: 2019-07-27T21:50:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T05:32:23.000Z (about 3 years ago)
• Last Synced: 2025-01-28T04:13:40.600Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-hooks-logger
• Size: 1.18 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  


    


    


    


    react-hooks-logger

    


    


    


    


  

  


  


  


  


  
npm i react-hooks-logger

  


  


  


  


  




![image](https://user-images.githubusercontent.com/10850034/61999787-8ff92980-b103-11e9-9962-7b23c811ff7b.png)

Simple hooks logger.

(Respect [redux-logger](https://github.com/LogRocket/redux-logger) and [use-reducer-logger](https://github.com/jefflombard/use-reducer-logger))

[![Maintainability](https://api.codeclimate.com/v1/badges/41e77fee6a93bef8b9c4/maintainability)](https://codeclimate.com/github/nitaking/react-hooks-logger/maintainability)

## Usage

```jsx

import { useReducer } from 'react-hooks-logger';

function reducer(state, action) {

  switch (action.type) {

    case 'count-up':

      return { count: state.count + action.payload.count }

    case 'count-down':

      return { count: state.count - action.payload.count }

  }

}

const initialState = { count: 0 };

const Demo = () => {

  const [state, dispatch] = useReducer(reducer, initialState);

  return (



      

          dispatch({

            type: "count-up",

            payload: { count: 1 }

          })

        }

      >

        +

      

      

          dispatch({

            type: "count-down",

            payload: { count: 1 }

          })

        }

      >

        -

      

      count: {state.count}

    

  );

};

```


## Dev Environment

Create custom hooks.

```jsx

import { useReducer as _useReducer } from 'react';

import { useReducer as useReducerWithLog } from 'react-hooks-logger';

export const useMyReducer = 

  process.env.NODE_ENV === 'development' ? useReducerWithLog : _useReducer;

```

Import your hooks.

```jsx

import { useReducer } from './useMyReducer';

...

```

# Todo

- [ ] Another Hooks API logger