https://github.com/mohebifar/konsul

A react renderer for browser's dev console
https://github.com/mohebifar/konsul

browser console devtools react

Last synced: about 15 hours ago
JSON representation

A react renderer for browser's dev console

• Host: GitHub
• URL: https://github.com/mohebifar/konsul
• Owner: mohebifar
• Created: 2017-01-13T02:50:21.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T23:15:03.000Z (about 2 years ago)
• Last Synced: 2024-04-14T13:15:52.126Z (8 months ago)
• Topics: browser, console, devtools, react
• Language: JavaScript
• Homepage: https://mohebifar.github.io/konsul/
• Size: 3.53 MB
• Stars: 617
• Watchers: 8
• Forks: 27
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - konsul
• awesome-react-renderer - react-konsul - A react renderer that renders to the browser's devtools console. (Web (+ NW & Electron))

README

        
![Konsul Logo](konsul-logo.png)

**Konsul** is an abstraction of the browser's `console` that comes with a React renderer. It offers text styling, images, style inheritance, buttons with click interaction, etc. inside the browsers dev console.

[See the live demo here](https://mohebifar.github.io/konsul/)

[![Travis](https://img.shields.io/travis/rust-lang/rust.svg)]()

[![npm](https://img.shields.io/npm/v/konsul.svg)]()

[![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg)](https://github.com/Flet/semistandard)

# Usage

## With react

Install `konsul` and `react-konsul` using npm:

```

npm install konsul react-konsul react

```

The following code demonstrates how you can use konsul with react.

```js

import createKonsul from 'konsul';

import renderToKonsul from 'react-konsul';

// Create an instance of konsul

const konsul = createKonsul();

// Render react elements to the browser console!

renderToKonsul(Hello world!, konsul);

```

This is what the result will look like:

![Konsul "Hello world" example](konsul-screenshot.jpg)

[See more examples here](https://github.com/mohebifar/konsul/tree/master/examples/src) with the [live demo](https://mohebifar.github.io/konsul/).

## React element types

### `text`

This node is the only node type that accepts `string`s and `number`s as children.

| Prop | Type | Description |

| --- | --- | --- |

| style | [`TextStyle`](https://github.com/mohebifar/konsul/blob/master/src/types/styles.js#L13) | A plain javascript object whose keys are camel cased property names with their property value. |

| children | `(Text|string|number)[]` | Only `Text`s, `string`s and `number`s are accepted as a Text's children |

### `image`

A Konsul node for displaying images from a url.

| Prop | Type | Description |

| --- | --- | --- |

| style | [`ImageStyle`](https://github.com/mohebifar/konsul/blob/master/src/types/styles.js#L20) | A plain javascript object whose keys are camel cased property names with their property value. |

| source | `string` | The URL of the image. |

### `button`

An interactive node that responds to clicks. **Note that it only works on chrome for now.**

| Prop | Type | Description |

| --- | --- | --- |

| onClick | `function` | Called when the user clicks on the element. |

| label | `string` | The label of the button. It will replace all the characters that are not acceptable for the name of a function with `_`. |

### `group`

All the children of a Group element will be wrapped inside `console.group`.

| Prop | Type | Description |

| --- | --- | --- |

| children | `Node[]` | All kind of elements except `string`s and `number`s are accepted. |

### `container`

This node has no specific behaviour. It works as a container and renders all its children.

| Prop | Type | Description |

| --- | --- | --- |

| children | `Node[]` | All kind of elements except `string`s and `number`s are accepted. |

## Without react

Install `konsul` via npm:

```

npm install konsul

```

The following code is the previous example but without react:

```js

import createKonsul from 'konsul';

// Create an instance of konsul

const konsul = createKonsul();

// Create a text

const text = konsul.text({

  style: {

    color: 'red',

    fontWeight: 'bold'

  }

});

// Append a text to the text element

text.append('Hello world!');

// Append the text element to konsul

konsul.append(text);

// Render to console. The subsequent renders will occur automatically for example by updating the style or children.

konsul.render();

```

# License

Released under the [MIT License](https://mohebifar.mit-license.org/)