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.
npm install console-playConsolePlay is a library that provides a way to output fancy and styled text in the browser console using Figlet fonts and custom style options.
Install:
```
npm install console-play
Simple usage:
`ts
import { consolePlay } from "console-play";
consolePlay({
text: "Hello, World!",
options: {
styleOptions: {
color: "red",
},
},
});
`
In console:
- 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
| Property | Type | Required | Default | Description |
| -------- | ---- | -------- | ------- | ----------- |
| text | string | Yes | N/A | The text to be output in the console. |ConsolePlayProps
| options | | No | N/A | An object containing configuration options for the console output. |
| 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. |boolean
| styleDebug | | No | false | A boolean flag to enable/disable style debugging.if true then console.log CSS style will be applied |
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 |HasThemeStyle
| color | | 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). |HasThemeStyle
| backgroundColor | | 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).|"inline-block" \| "block" \| "flex" \| "grid"
| display | | No | N/A | CSS display value. |FourDirectionStyle
| padding | | No | N/A | Padding around the text. Can be a single number or an object with top, right, left, and bottom properties. |FourDirectionStyle
| margin | | No | N/A | Margin around the text. Can be a single number or an object with top, right, left, and bottom properties. |string
| boxShadow | | 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:
`typescript`
type HasThemeStyle =
| string
| {
light: string;
dark: string;
};
The FourDirectionStyle type is defined as follows:
`typescript`
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.