@dreipol/react-log

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

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
• Logger
• Provider
• Consumer
• ReactLogger

create

• See: https://github.com/dreipol/abstract-log#config

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

• See: https://reactjs.org/docs/context.html#api

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

Provider

• See: https://reactjs.org/docs/context.html#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

• See: https://reactjs.org/docs/context.html#consumer

Logger context consumer

Type: Consumer

Examples

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

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

ReactLogger

• See: https://reactjs.org/docs/context.html#consumer

Consumer alias

Type: Consumer

Examples

import ReactLogger from '@dreipol/react-log'

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