https://github.com/mxz96102/react-logview
A component display highlight log blazing fast
https://github.com/mxz96102/react-logview
Last synced: 12 months ago
JSON representation
A component display highlight log blazing fast
- Host: GitHub
- URL: https://github.com/mxz96102/react-logview
- Owner: mxz96102
- Created: 2020-10-29T07:09:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-10-29T08:21:35.000Z (over 5 years ago)
- Last Synced: 2025-01-25T09:27:02.743Z (about 1 year ago)
- Language: TypeScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-blazingly-fast - react-logview - A component display highlight log blazing fast (TypeScript)
README
# react-logview
> Using virtual window and lowlight to render logs without innerHTML and fast.
## Install
```bash
npm install --save react-logvew
```
## Get Started
### Basic Usage
You can use log view easily by import LogView component
```tsx
import React from 'react';
import { LogView } from 'react-logview';
const generateRandomLogs = (sum) => {
let i = sum;
let str = ''
while (sum--) {
str += `${Math.random() > 0.5 ? '[WARN]' : '[ERROR]'}: ${Math.random().toString(16).slice(-5).repeat(10)}\n`
}
return str
}
export default () => ;
```
### Massive Mount of Logs
Event with million lines of logs, still not block browser
```tsx
import React, {useState} from 'react';
import { LogView } from 'react-logview';
const generateRandomLogs = (sum) => {
let i = sum;
let str = ''
while (sum--) {
str += `${Math.random() > 0.5 ? '[WARN]' : '[ERROR]'}: ${Math.random().toString(16).slice(-5).repeat(10)}\n`
}
return str
}
export default () => {
const [content, setContent] = useState('Press Load to load');
return <> setContent(generateRandomLogs(1200000))}>Load>};
```
### Themes
We support light(github style) and dark(darcula style) by using theme;
```tsx
import React from 'react';
import { LogView } from 'react-logview';
const generateRandomLogs = (sum) => {
let i = sum;
let str = ''
while (sum--) {
str += `${Math.random() > 0.5 ? '[WARN]' : '[ERROR]'}: ${Math.random().toString(16).slice(-5).repeat(10)}\n`
}
return str
}
export default () => <>
Light Theme
Dark Theme
>;
```
### Keyword Search
By using keyword props, you can find the lines contains your words.
```tsx
import React, { useState } from 'react';
import { LogView } from 'react-logview';
const generateRandomLogs = (sum) => {
let i = sum;
let str = ''
while (sum--) {
str += `${Math.random() > 0.5 ? '[WARN]' : '[ERROR]'}: ${Math.random().toString(16).slice(-5).repeat(10)}\n`
}
return str
}
export default () => {
const [keyword, setKeyword] = useState('ERROR')
console.log(keyword)
return <>
setKeyword(value)} />
>};
```
### Props
| Props | Type | Description |
|----------------|-------------------|---------------------------------------------------------|
| content | string | (required) content of logs |
| width | number | width |
| height | number | height |
| fontSize | number | font size of log |
| theme | "light" \| "dark" | theme now only support light and dark |
| language | string | language of logs default set to prolog |
| focusLine | number | on change of focus line, view will scroll to lineNumber |
| keywords | string | filter the line that contains keywords |
| style | Style | styles of view |
| listRef | MutableRef | ref of container dom |
| onScrollBottom | () => void | call back on scroll to bottom |
| revert | boolean | revert logs rank |
## Develop
Install dependencies,
```bash
$ npm i
```
Start the dev server,
```bash
$ npm start
```
Build documentation,
```bash
$ npm run docs:build
```
Build the lib
```bash
$ npm run build
```