Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-hooks-logger with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactHooksLogger = require("react-hooks-logger")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-hooks-logger v1.0.2

Simple react hooks logger.




react-hooks-logger







npm i react-hooks-logger





image

Simple hooks logger. (Respect redux-logger and use-reducer-logger)

Maintainability

Usage

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 (
<div>
      <button
        onClick={() =>
          dispatch({
            type: "count-up",
            payload: { count: 1 }
          })
        }
      >
        +
      </button>
      <button
        onClick={() =>
          dispatch({
            type: "count-down",
            payload: { count: 1 }
          })
        }
      >
        -
      </button>
      count: {state.count}
    </div>
  );
};

Dev Environment

Create custom hooks.

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

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

Import your hooks.

import { useReducer } from './useMyReducer';

...

Todo

  • [ ] Another Hooks API logger
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free