Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iam-medvedev/rich-log
React plugin for writing styled console logs using JSX.
https://github.com/iam-medvedev/rich-log
Last synced: about 1 month ago
JSON representation
React plugin for writing styled console logs using JSX.
- Host: GitHub
- URL: https://github.com/iam-medvedev/rich-log
- Owner: iam-medvedev
- License: wtfpl
- Created: 2022-05-19T07:30:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-06-22T05:24:08.000Z (over 2 years ago)
- Last Synced: 2024-11-14T20:47:13.477Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://npmjs.com/package/rich-log
- Size: 1.94 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rich Log
React plugin for writing styled console logs using JSX.
## Get started
```bash
yarn add rich-log
```
[Try it on CodeSandbox](https://codesandbox.io/s/silly-roman-3x7zcw?file=/src/App.tsx)
```tsx
import RichLog from 'rich-log';
RichLog.log(
This is
rich-log
v1.0.0
,
);
```
Output:
Thats it!
## Benefits ✨
- JSX in `console.log`
- Styling with props (like styled-component)
- Lightweight
- Written in Typescript
- Works with React and Preact
## Components
### ``
A component for displaying styled text.
```tsx
RichLog.log(
Hello world
,
);
```
Output:
### ``
If you want to display several components at once, you can nest them in a fragment.
```tsx
RichLog.log(
My name is:
Slim Shady
,
);
```
Output:
If you want to separate text lines, you use the `separate`-prop:
```tsx
RichLog.log(
First line
Second line
,
);
```
Output:
### ``
Component for rendering data to table.
```tsx
RichLog.log();
```
Output:
### ``
Component for grouping logs.
```tsx
RichLog.log(
Collapsed group
}
>
I'am a text inside group
,
);
```
Output:
### ``
Component for rendering images and gifs.
```tsx
RichLog.log(
,
);
```
Output:
### ``
Component for rendering svg icons.
```tsx
RichLog.log(
,
);
```
Output:
### ``
Component for rendering boxes.
```tsx
RichLog.log(
,
);
```
## TODO
- [ ] Safari support
- [ ] Styled tables
## License
`rich-log` is [WTFPL licensed](./LICENSE).