react-logview

Using virtual window and lowlight to render logs without innerHTML and fast.

Install

npm install --save react-logvew

Get Started

Basic Usage

You can use log view easily by import LogView component

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 () => <LogView content={generateRandomLogs(100)} height={120} />;

Massive Mount of Logs

Event with million lines of logs, still not block browser

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 <><button onClick={() => setContent(generateRandomLogs(1200000))}>Load</button><LogView revert language="prolog" content={content} height={200}  /></>};

Themes

We support light(github style) and dark(darcula style) by using theme;

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
  <LogView content={generateRandomLogs(100)} height={120} />
  Dark Theme
  <LogView content={generateRandomLogs(100)} height={120} theme="dark" />
</>;

Keyword Search

By using keyword props, you can find the lines contains your words.

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 <>
  <input value={keyword} onChange={({target: {value}}) => setKeyword(value)} />
  <LogView content={generateRandomLogs(100)} height={120} keywords={keyword} />
</>};

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,

$ npm i

Start the dev server,

$ npm start

Build documentation,

$ npm run docs:build

Build the lib

$ npm run build