https://github.com/tur-nr/react-console
A React reconciler for browser consoles.
https://github.com/tur-nr/react-console
Last synced: 2 months ago
JSON representation
A React reconciler for browser consoles.
- Host: GitHub
- URL: https://github.com/tur-nr/react-console
- Owner: tur-nr
- License: mit
- Created: 2020-09-26T13:24:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-10-15T11:27:55.000Z (over 4 years ago)
- Last Synced: 2024-11-01T11:34:30.433Z (8 months ago)
- Language: JavaScript
- Size: 1.53 MB
- Stars: 26
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Console
A reconciler for rendering components to the browser's console, because why not.
```jsx
import React from "react";
import console from "react-console";
const name = "Chris";
const color = "#21a0a0";
console.log(
Hello,{" "}
{name}
!
);
```
## Usage
### Install
Add `react-console` as a dependency to your project.
```
npm install react-console
```
### Console
`react-console` exports a console context with an additional `render` method.
This can be used as a replacement to the global `console` object, however it
allows rendering of React components.
#### Methods
The following methods will render a component if the **_first and only_**
argument is a React element.
- `.log`
- `.info`
- `.debug`
- `.warn`
- `.error`
- `.group`
- `.groupCollapsed`
- `.trace`
#### Render
The methods above are just sugar for the `render` method.
```jsx
import React from "react";
import console from "react-console";
console.render(Ouch, window.console, "error");
// same as
console.error(Ouch);
```
#### Anchors
Anchor elements will have their hrefs appended.
```js
import React from "react";
import console from "react-console";
console.log(Google);
```
#### Images
You can render images however you must provide `width` and `height` props.
```jsx
import React from "react";
import console from "react-console";
console.log(
);
```
### User Components
You can render any user defined component as long as they result to host
components that are supported.
```jsx
import React from "react";
import console from "react-console";
function Diff(props) {
return (
<>
{props.previous}
→
{props.next}
>
);
}
console.log();
```
### Caveats
#### One-time log
Logs are a one-time render, meaning components can't cause console logs.
Therefore use of hooks will not work. Nor will self updating components via
component lifecycles.
#### Logging elements
To log the element object itself instead of rendering you can do this:
```jsx
console.log("%o", );
// or
window.console.log();
```
#### No block or layout elements
The console will only create `spans` for substitutions and removes any block
styling. Trying to style complex layouts in the console won't work.
However, you can try create block-like logs with a little padding trick.
```jsx
import React from "react";
import console from "react-console";
function ColorBlock(props) {
return (
{/* render an empty string */}{" "}
);
}
console.log(
<>
>
);
```
