ConsolePlay: A Fancy Console Output Library

ConsolePlay is a library that provides a way to output fancy and styled text in the browser console using Figlet fonts and custom style options.

Quick Start

Install:

npm install console-play

Simple usage:

import { consolePlay } from "console-play";

consolePlay({
    text: "Hello, World!",
    options: {
        styleOptions: {
            color: "red",
        },
    },
});

In console:

Features

• Output text using Figlet fonts (currently only Standard, but more Figlet fonts will be supported in the future).
• Custom styling options for the console output
• Dark mode support

API

consolePlay

| Property | Type | Required | Default | Description | | -------- | ---- | -------- | ------- | ----------- | | text | string | Yes | N/A | The text to be output in the console. | | options | ConsolePlayProps | No | N/A | An object containing configuration options for the console output. |

Option

| Property | Type | Required | Default | Description | | -------- | ---- | -------- | ------- | ----------- | | consoleType | "log", "info", "warn", "error" | No | "log" | The type of console output (e.g., log, error, warn, etc.). | | wrapUnit | string | No | N/A | A string representing the character(s) to wrap around the text. this prop is alpha version. so it may not work. | | styleOptions | StyleOptions | Yes | N/A | An object containing the style options for the console output. | | styleDebug | boolean | No | false | A boolean flag to enable/disable style debugging.if true then console.log CSS style will be applied |

Style Options

Style options is unfinished. So, it may not work except color and backGroundColor.

| Property | Type | Required | Default | Description | | -------- | ---- | -------- | ------- | ----------- | | imageUrl | string | Yes | N/A | URL of the image to be displayed as a background image. if this prop set, then you also need to set padding to allocate place for image | | color | HasThemeStyle | No | N/A | Text color. Can be a single color or an object with light and dark properties (can automatically switch between dark or light mode depending on the user's environment). | | backgroundColor | HasThemeStyle | No | N/A | Background color. Can be a single color or an object with light and dark properties (can automatically switch between dark or light mode depending on the user's environment).| | display | "inline-block" \| "block" \| "flex" \| "grid" | No | N/A | CSS display value. | | padding | FourDirectionStyle | No | N/A | Padding around the text. Can be a single number or an object with top, right, left, and bottom properties. | | margin | FourDirectionStyle | No | N/A | Margin around the text. Can be a single number or an object with top, right, left, and bottom properties. | | boxShadow | string | No | N/A | CSS box-shadow value. such as box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);|

The HasThemeStyle type is defined as follows:

type HasThemeStyle =
  | string
  | {
      light: string;
      dark: string;
    };

The FourDirectionStyle type is defined as follows:

type FourDirectionStyle =
  | number
  | {
      top?: number;
      right?: number;
      left?: number;
      bottom?: number;
    };

For more information on HasThemeStyle and FourDirectionStyle, please refer to the original code provided.

License

MIT © skyt-a