React component that loads and views remote text in the browser lazily and efficiently. Logs can be loaded from static text, a URL, or a WebSocket and including ANSI highlighting. Based on @melloware/react-logviewer
import { LogViewer } from '@yuntijs/ui';React component that loads and views remote text in the browser lazily and efficiently. Logs can be loaded from static text, a URL, or a WebSocket and including ANSI highlighting. Based on @melloware/react-logviewer
import { LogViewer } from '@yuntijs/ui';
const LogViewerDemo = () => {
return (
<LogViewer
enableSearch
extraLines={1}
height={520}
selectableLines
url="https://gist.githubusercontent.com/helfi92/96d4444aa0ed46c5f9060a789d316100/raw/ba0d30a9877ea5cc23c7afcd44505dbc2bab1538/typical-live_backing.log"
/>
);
};
export default ProCardDemo;| Name | Description | Type | Default |
|---|---|---|---|
| refreshInterval | Timed refresh, in ms, only takes effect when url is specified and not websocket | number | -- |
| style | Optional custom inline style to attach to root virtual `LazyList` element. | {} | -- |
| text | String containing text to display. | string | -- |
| url | The URL from which to fetch content. Subject to same-origin policy, so must be accessible via fetch on same domain or via CORS. | string | -- |
| onLoad | Execute a function if/when the provided `url` has completed loading. | ()=>any | -- |
| onError | Execute a function if the provided `url` has encountered an error during loading. | (error:any)=>any | -- |
| onScroll | Callback to invoke on user scroll. Args matches the ScrollFollow onScroll callback. | (args:{ scrollTop: number; scrollHeight: number; clientHeight: number; })=>void | -- |
| height | Set the height in pixels for the component. Defaults to `'auto'` if unspecified. When the `height` is `'auto'`, the component will expand vertically to fill its container. | string|number | -- |
| width | Set the width in pixels for the component. Defaults to `'auto'` if unspecified. When the `width` is `'auto'`, the component will expand horizontally to fill its container. | string|number | -- |
| gutter | The Line Gutter component | ReactNode[] | -- |
| caseInsensitive | Flag to enable/disable case insensitive search | boolean | -- |
| containerStyle | Optional custom inline style to attach to element which contains the interior scrolling container. | {} | -- |
| enableHotKeys | If true, capture system hotkeys for searching the page (Cmd-F, Ctrl-F, etc.) | boolean | -- |
| enableGutters | Enable the line gutters to be displayed. Default is false | boolean | -- |
| enableLineNumbers | Enable the line numbers to be displayed. Default is true. | boolean | -- |
| enableLinks | Enable hyperlinks to be discovered in log text and made clickable links. Default is false. | boolean | -- |
| enableSearch | Enable the search feature. | boolean | -- |
| enableSearchNavigation | If true, search like a browser search - enter jumps to the next line with the searched term, shift + enter goes backwards. Also adds up and down arrows to search bar to jump to the next and previous result. If false, enter toggles the filter instead. Defaults to true. | boolean | -- |
| enableMultilineHighlight | Enable the ability to select multiple lines using shift + click. Defaults to true. | boolean | -- |
| extraLines | Number of extra lines to show at the bottom of the log. Set this to 1 so that Linux users can see the last line of the log output. | number | -- |
| fetchOptions | Options object which will be passed through to the `fetch` request. Defaults to `{ credentials: 'omit' }`. | any | -- |
| follow | Scroll to the end of the component after each update to the content. Cannot be used in combination with `scrollToLine`. | boolean | -- |
| formatPart | Execute a function against each string part of a line, returning a new line part. Is passed a single argument which is the string part to manipulate, should return a new string with the manipulation completed. | (text:string)=>|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|boolean | -- |
| highlight | Line number (e.g. `highlight={10}`) or line number range to highlight inclusively (e.g. `highlight={[5, 10]}` highlights lines 5-10). This is 1-indexed, i.e. line numbers start at `1`. | number|Array | -- |
| highlightLineClassName | Specify an additional className to append to highlighted lines. | string | -- |
| lineClassName | Specify an additional className to append to lines. | string | -- |
| onHighlight | Execute a function when the highlighted range has changed. Is passed a single argument which is an `Immutable.Range` of the highlighted line numbers. | (range:Immutable.Seq.Indexed<number>)=>any | -- |
| onLineNumberClick | Additional function called when a line number is clicked. On click, the line will always be highlighted. This function is to provide additional actions. Receives an object with lineNumber and highlightRange. Defaults to null. | (event:import("/src/LogViewer/types").LineNumberClickEvent)=>any | -- |
| onLineContentClick | Callback to invoke on click of line contents. | (event:React.MouseEvent<HTMLSpanElement, MouseEvent>)=>void | -- |
| overscanRowCount | Number of rows to render above/below the visible bounds of the list. This can help reduce flickering during scrolling on certain browsers/devices. Defaults to `100`. | number | -- |
| rowHeight | A fixed row height in pixels. Controls how tall a line is, as well as the `lineHeight` style of the line's text. Defaults to `19`. | number | -- |
| scrollToLine | Scroll to a particular line number once it has loaded. This is 1-indexed, i.e. line numbers start at `1`. Cannot be used in combination with `follow`. | number | -- |
| selectableLines | Make the text selectable, allowing to copy & paste. Defaults to `false`. | boolean | -- |
| stream | Set to `true` to specify remote URL will be streaming chunked data. Defaults to `false` to download data until completion. | boolean | -- |
| websocket | Set to `true` to specify that url is a websocket URL. Defaults to `false` to download data until completion. | boolean | -- |
| websocketOptions | Options object which will be passed through to websocket. | {onOpen?:(e:Event,socket:any)=>void;onClose?:(e:any)=>void;onError?:(e:Event)=>void;formatMessage?:(message:any)=>string;reconnect?:boolean;reconnectWait?:number} | -- |
| className | -- | string | -- |
| id | -- | string | -- |