@dreipol/react-log

React debugging helpers

Usage no npm install needed!

<script type="module">
  import dreipolReactLog from 'https://cdn.skypack.dev/@dreipol/react-log';
</script>

README

react-log

React logger provider component for the @dreipol/abstract-log helper.
If you are a Vue.js user you could check also our @dreipol/vue-log

Build Status Coverage Status

NPM version NPM downloads MIT License

Installation

npm i @dreipol/react-log -S

Usage

import Logger from '@dreipol/react-log';
import React from 'react';
import { render } from 'react-dom';

function App({log, message}) {
    log(message);

    return <p>{message}</p>;
}

render(
    <Logger>
        {({log}) => <App log={log} message='Hello world'/> }
    </Logger>,
    document.getElementById('root')
);

API

Table of Contents

create

Create a new logger instance with your custom params and configs

Parameters

  • target Object target object that will be automatically extended with the logger methods (optional, default {})
  • config Object logger configuration (optional, default createConfig())

Examples

import { create } from '@dreipol/react-log'

const logger = create()

logger.warn('This is a warning!')

Returns Object logger object

Logger

Logger context creation. It's an object containing the <Provider/> and the <Consumer/>

Provider

Logger context Provider. It can be used to override the default log methods

Type: Provider

Examples

import { Consumer, Provider } from '@dreipol/react-log'

<Provider value={console}>
    <Consumer>
         { ({log}) => <App log={log}/> }
    </Consumer>
</Provider>

Consumer

Logger context consumer

Type: Consumer

Examples

import { Consumer } from '@dreipol/react-log'

<Consumer>
    { ({log}) => <App log={log}/> }
</Consumer>

ReactLogger

Consumer alias

Type: Consumer

Examples

import ReactLogger from '@dreipol/react-log'

<ReactLogger>
    { ({log}) => <App log={log}/> }
</ReactLogger>