An open API service indexing awesome lists of open source software.

https://github.com/tur-nr/react-console

A React reconciler for browser consoles.
https://github.com/tur-nr/react-console

Last synced: about 2 months ago
JSON representation

A React reconciler for browser consoles.

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}

!

);
```

![](support/screenshot-1.png)

## 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);
```

![](support/screenshot-2.png)

#### 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(
Random kitten
);
```

![](support/screenshot-3.png)

### 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();
```

![](support/screenshot-4.png)

### 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(
<>







>
);
```

![](support/screenshot-5.png)