Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dreipol/react-log
React container to better debug react applications
https://github.com/dreipol/react-log
Last synced: 7 days ago
JSON representation
React container to better debug react applications
- Host: GitHub
- URL: https://github.com/dreipol/react-log
- Owner: dreipol
- License: mit
- Created: 2018-03-28T15:46:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-14T13:54:13.000Z (about 6 years ago)
- Last Synced: 2024-10-03T06:55:30.880Z (about 1 month ago)
- Language: JavaScript
- Size: 204 KB
- Stars: 0
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-log
React logger provider component for the [@dreipol/abstract-log](https://github.com/dreipol/abstract-log) helper.
If you are a Vue.js user you could check also our [`@dreipol/vue-log`](https://github.com/dreipol/vue-log)
[![Build Status][circleci-image]][circleci-url]
[![Coverage Status][coverage-image]][coverage-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
## Installation
```bash
npm i @dreipol/react-log -S
```
## Usage
```jsx
import Logger from '@dreipol/react-log';
import React from 'react';
import { render } from 'react-dom';
function App({log, message}) {
log(message);
return
{message}
;
}
render(
{({log}) => }
,
document.getElementById('root')
);
```
[circleci-image]: https://circleci.com/gh/dreipol/react-log/tree/master.svg?style=svg&circle-token=4fbc94f02a84443a9d0906866b3b858a0f45535c
[circleci-url]: https://circleci.com/gh/dreipol/react-log/tree/master
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
[license-url]: LICENSE
[npm-version-image]: http://img.shields.io/npm/v/@dreipol/react-log.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/@dreipol/react-log.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@dreipol/react-log
[coverage-image]: https://img.shields.io/coveralls/dreipol/react-log/master.svg?style=flat-square
[coverage-url]: https://coveralls.io/r/dreipol/react-log/?branch=master
## API
#### Table of Contents
- [create](#create)
- [Logger](#logger)
- [Provider](#provider)
- [Consumer](#consumer)
- [ReactLogger](#reactlogger)
### create
- **See: **
Create a new logger instance with your custom params and configs
**Parameters**
- `target` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** target object that will be automatically extended with the logger methods (optional, default `{}`)
- `config` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** logger configuration (optional, default `createConfig()`)
**Examples**
```jsx
import { create } from '@dreipol/react-log'
const logger = create()
logger.warn('This is a warning!')
```
Returns **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** logger object
### Logger
- **See: **
Logger context creation. It's an object containing the `` and the ``
### Provider
- **See: **
Logger context Provider. It can be used to override the default log methods
Type: [Provider](#provider)
**Examples**
```jsx
import { Consumer, Provider } from '@dreipol/react-log'
{ ({log}) => }
```
### Consumer
- **See: **
Logger context consumer
Type: [Consumer](#consumer)
**Examples**
```jsx
import { Consumer } from '@dreipol/react-log'
{ ({log}) => }
```
### ReactLogger
- **See: **
Consumer alias
Type: [Consumer](#consumer)
**Examples**
```jsx
import ReactLogger from '@dreipol/react-log'
{ ({log}) => }
```