### Install React LogViewer

Source: https://github.com/melloware/react-logviewer/blob/main/README.md

Install the react-logviewer package using npm or yarn.

```shell
$ npm i --save @melloware/react-logviewer
```

--------------------------------

### View Logs via WebSocket

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LazyLog/README.md

Connect to a WebSocket endpoint using the `url` prop and `websocket` prop. The `websocketOptions` allow for custom message formatting and handling the `onOpen` event to manage the socket connection.

```jsx harmony
const url = 'wss://echo.websocket.org';
let socket = null;

<div>
  <button
    style={{ marginBottom: 8, background: '#eee' }}
    onClick={() => socket && socket.send(JSON.stringify({ message: '[taskcluster 2018-11-14 21:08:32.452Z] Worker Group: us-east-1' }))}>
    ping
  </button>
  <div style={{ height: 200, width: 902 }}>
  <LazyLog
    enableSearch
    url={url}
    websocket
    websocketOptions={{
      onOpen: (e, sock) => { socket = sock; sock.send(JSON.stringify({message: "Socket has been opened!"})) },
      formatMessage: e => JSON.parse(e).message,
    }}
  />
  </div>
</div>
```

--------------------------------

### Basic LinePart Usage

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LinePart/README.md

Render a simple text part using the LinePart component. Ensure the 'part' prop is provided with a 'text' property.

```javascript
<LinePart
  part={{ text: 'Hello world!' }}
/>
```

--------------------------------

### Basic LineContent Usage

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LineContent/README.md

Renders a line with a given number and text data. Ensure the 'data' prop is an array of objects, each with a 'text' property.

```javascript
<LineContent
  number={10}
  data={[{ text: 'Hello' }, { text: ' world!' }]} 
/>
```

--------------------------------

### View Logs from String

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LazyLog/README.md

Provide log content directly using the `text` prop for logs stored as a string. `extraLines` and `enableSearch` function similarly to the `url` prop.

```javascript
const text = "\nSed ut perspiciatis unde omnis iste natus error sit voluptatem\naccusantium doloremque laudantium, totam rem aperiam,\neaque ipsa quae ab illo inventore veritatis et quasi architecto\nbeatae vitae dicta sunt explicabo. Nemo enim ipsam\nvoluptatem quia voluptas sit aspernatur aut odit aut fugit, sed\nquia consequuntur magni dolores eos qui ratione\nvoluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem\nipsum quia dolor sit amet, consectetur, adipisci\nvelit, sed quia non numquam eius modi tempora incidunt ut labore\net dolore magnam aliquam quaerat voluptatem.\n\nUt enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit\nlaboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure\nreprehenderit qui in ea voluptate velit esse quam nihil molestiae\nconsequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?\n";

<div style={{ height: 300, width: 902 }}>
  <LazyLog extraLines={1} enableSearch text={text} caseInsensitive />
</div>
```

--------------------------------

### Storybook Runtime Configuration

Source: https://github.com/melloware/react-logviewer/blob/main/docs/index.html

Configures global Storybook settings and features at runtime. This includes feature flags, reference definitions, log levels, and documentation options. Ensure these global variables are set before Storybook initializes.

```javascript
window['FEATURES'] = { "argTypeTargetsV7": true, "legacyDecoratorFileOrder": false, "disallowImplicitActionsInRenderV8": true };
window['REFS'] = {};
window['LOGLEVEL'] = "info";
window['DOCS_OPTIONS'] = { "defaultName": "Docs", "autodocs": "tag" };
window['CONFIG_TYPE'] = "PRODUCTION";
window['TAGS_OPTIONS'] = { "dev-only": { "excludeFromDocsStories": true }, "docs-only": { "excludeFromSidebar": true }, "test-only": { "excludeFromSidebar": true, "excludeFromDocsStories": true } };
window['STORYBOOK_RENDERER'] = "react";
window['STORYBOOK_BUILDER'] = "@storybook/builder-vite";
window['STORYBOOK_FRAMEWORK'] = "@storybook/react-vite";
```

--------------------------------

### View Logs from URL

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LazyLog/README.md

Use the `url` prop to fetch and display log content from a remote URL. `extraLines` controls the number of lines to keep rendered below the viewport, and `enableSearch` adds a search input.

```javascript
const url = 'https://gist.githubusercontent.com/helfi92/96d4444aa0ed46c5f9060a789d316100/raw/ba0d30a9877ea5cc23c7afcd44505dbc2bab1538/typical-live_backing.log';

<div style={{ height: 500, width: 902 }}>
  <LazyLog extraLines={1} enableSearch url={url} caseInsensitive />
</div>
```

--------------------------------

### Storybook Fullscreen Main Display CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Styles for making the main Storybook content take up the entire viewport.

```css
.sb-show-main.sb-main-fullscreen {
  margin: 0;
  padding: 0;
  display: block;
}
```

--------------------------------

### Basic LazyLog Usage

Source: https://github.com/melloware/react-logviewer/blob/main/README.md

Render the LazyLog component with the required 'url' prop to display remote log content. Ensure the container has valid dimensions.

```jsx
import React from "react";
import { render } from "react-dom";
import { LazyLog } from "@melloware/react-logviewer";

render(<LazyLog url="http://example.log" />, document.getElementById("root"));
```

--------------------------------

### Using ScrollFollow with LazyLog

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/ScrollFollow/README.md

Integrates ScrollFollow with LazyLog to enable dynamic 'follow' behavior. Pass the 'onScroll' and 'follow' props from ScrollFollow to LazyLog. The 'startFollowing' prop can be used to initially enable the follow mode.

```javascript
import { LazyLog } from "..\/..\/";
const url = "https://runkit.io/eliperelman/streaming-endpoint/branches/master";

<div style={{ height: 500, width: 902 }}>
  <ScrollFollow
    startFollowing
    render={({ onScroll, follow, startFollowing, stopFollowing }) => (
      <LazyLog extraLines={1} enableSearch url={url} stream onScroll={onScroll} follow={follow} />
    )}
  />
</div>
```

--------------------------------

### Storybook Global JavaScript Configuration

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Sets global configuration variables for Storybook, including environment type, log level, and feature flags.

```javascript
window.CONFIG_TYPE = 'PRODUCTION';
window.LOGLEVEL = 'info';
window.FRAMEWORK_OPTIONS = {};
window.CHANNEL_OPTIONS = {};
window.FEATURES = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true};
window.STORIES = [{"titlePrefix":"","directory":"./src","files":"**/*.mdx","importPathMatcher":"^\\.[\]\\/](?:src(?:[\]\\/](?!\\.)(?:(?:(?!(?:^|[\]\\/])\\.).)*?)[\]\\/]|[\]\\/]|$) (?!\\.)(?=.)[^\\/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\]\\/](?:src(?:[\]\\/](?!\\.)(?:(?:(?!(?:^|[\]\\/])\\.).)*?)[\]\\/]|[\]\\/]|$) (?!\\.)(?=.)[^\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];
window.DOCS_OPTIONS = {"defaultName":"Docs","autodocs":"tag"};
window.TAGS_OPTIONS = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};

// We do this so that "module && module.hot" etc. in Storybook source code
// doesn't fail (it will simply be disabled)
window.module = undefined;
window.global = window;
```

--------------------------------

### LinePart with Custom Formatting

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LinePart/README.md

Apply custom formatting to the text of a LinePart using the 'format' prop. This allows transforming the text before rendering.

```javascript
<LinePart
  part={{ text: 'Hello world!' }}
  format={text => text.replace('world', 'galaxy')}
/>
```

--------------------------------

### Storybook Padded Main Display CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Styles for applying padding to the main Storybook content area.

```css
.sb-show-main.sb-main-padded {
  margin: 0;
  padding: 1rem;
  display: block;
  box-sizing: border-box;
}
```

--------------------------------

### Storybook Wrapper CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Defines the main wrapper for the Storybook UI, including positioning, padding, and font styles.

```css
.sb-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 40px;
  font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

@media (max-width: 700px) {
  .sb-wrapper {
    padding: 20px;
  }
}

@media (max-width: 500px) {
  .sb-wrapper {
    padding: 10px;
  }
}
```

--------------------------------

### LineNumber with Click Handler

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LineNumber/README.md

Configure a click handler for the LineNumber component. The handler receives the line number as an argument.

```javascript
<LineNumber
  number={10}
  onClick={number => alert(`Line ${number} clicked!`)}
/>
```

--------------------------------

### Render a LineNumber

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LineNumber/README.md

Basic usage of the LineNumber component to display a line number. Pass the line number as a prop.

```javascript
<LineNumber
  number={10}
/>
```

--------------------------------

### View Logs via EventSource

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LazyLog/README.md

Stream logs from an EventSource endpoint by setting the `url` prop and the `eventsource` prop. `eventsourceOptions` can be used to customize message formatting.

```jsx harmony
const url = 'https://my.eventsource.tld';

<div>
  <div style={{ height: 200, width: 902 }}>
  <LazyLog
    enableSearch
    url={url}
    eventsource
    eventsourceOptions={{
      formatMessage: e => JSON.parse(e).message,
    }}
  />
  </div>
</div>
```

--------------------------------

### Handle Vite App Loading Errors

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

This function intercepts and logs errors during Vite app loading in Storybook's development environment. It provides specific guidance for resolving host and allowedHosts configuration issues when Storybook is accessed on a hostname other than localhost.

```javascript
// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention function 
__onViteAppLoadingError(event) {
  const hostname = globalThis.location.hostname;
  if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {
    const message = `Failed to load the Storybook preview file 'vite-app.js': It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this. Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal. See:
`;
    const docs = [
      'https://storybook.js.org/docs/api/cli-options#dev',
      'https://storybook.js.org/docs/api/main-config/main-config-vite-final',
      'https://vite.dev/config/server-options.html#server-allowedhosts',
    ];
    console.error(
      `${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`
    );
    document.getElementById('storybook-root').innerHTML =
      `<p style="color: red; max-width: 70ch">${message.replaceAll( '\n', '<br/>' )}\n<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}<ul></p>`;
    return;
  }
}
```

--------------------------------

### Storybook No Preview Area CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Styles for the area displayed when no preview is available, including centering and background.

```css
.sb-nopreview {
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
}

.sb-nopreview_main {
  margin: auto;
  padding: 30px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
}

.sb-nopreview_heading {
  text-align: center;
}
```

--------------------------------

### Storybook Manager Runtime Imports

Source: https://github.com/melloware/react-logviewer/blob/main/docs/index.html

Imports necessary modules and addons for the Storybook manager interface. These imports are essential for the functionality of various Storybook features and addons.

```javascript
import './sb-manager/globals-runtime.js';
import './sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js';
import './sb-addons/links-1/manager-bundle.js';
import './sb-addons/essentials-controls-2/manager-bundle.js';
import './sb-addons/essentials-actions-3/manager-bundle.js';
import './sb-addons/essentials-docs-4/manager-bundle.js';
import './sb-addons/essentials-backgrounds-5/manager-bundle.js';
import './sb-addons/essentials-viewport-6/manager-bundle.js';
import './sb-addons/essentials-toolbars-7/manager-bundle.js';
import './sb-addons/essentials-measure-8/manager-bundle.js';
import './sb-addons/essentials-outline-9/manager-bundle.js';
import './sb-addons/interactions-10/manager-bundle.js';
import './sb-manager/runtime.js';
```

--------------------------------

### LazyLog for Streaming Data

Source: https://github.com/melloware/react-logviewer/blob/main/README.md

Use the 'stream' prop set to 'true' for rendering streaming or chunked responses, enabling quicker upfront rendering.

```jsx
<LazyLog stream url="http://example.log" />
```

--------------------------------

### Storybook Heading CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Styles for headings within the Storybook UI, controlling font size, weight, and spacing.

```css
.sb-heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 10px 0;
  padding-right: 25px;
}
```

--------------------------------

### Storybook Centered Main Display CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Styles for centering the main Storybook content, including adjustments for IE11.

```css
.sb-show-main.sb-main-centered {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.sb-show-main.sb-main-centered #storybook-root {
  box-sizing: border-box;
  margin: auto;
  padding: 1rem;
  max-height: 100%;
  /* Hack for centering correctly in IE11 */
}

/* Vertical centering fix for IE11 */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .sb-show-main.sb-main-centered:after {
    content: '';
    min-height: inherit;
    font-size: 0;
  }
}
```

--------------------------------

### Mount LazyLog Component with EventSource

Source: https://github.com/melloware/react-logviewer/blob/main/tests/e2e/test-app.html

Mounts the LazyLog component to a specified DOM element, configuring it to receive logs via EventSource. Ensure ReactLogViewer is loaded before calling this function.

```javascript
window.mountLog = async (endpoint, options = {}) => {
  if (!window.ReactLogViewer) {
    console.error('ReactLogViewer not loaded!');
    document.getElementById('status').textContent = 'Error: ReactLogViewer not loaded';
    return;
  }
  const { LazyLog } = window.ReactLogViewer;
  const container = document.getElementById('root');
  const element = React.createElement(LazyLog, {
    url: `http://localhost:${window.TEST_PORT}${endpoint}`,
    eventsource: true, // Note: it's eventsource (all lowercase)
    eventsourceOptions: options,
    height: 400,
    follow: true
  });
  window.logRoot = ReactDOM.createRoot(container);
  window.logRoot.render(element);
  document.getElementById('status').textContent = `Mounted: ${endpoint}`;
};
```

--------------------------------

### Import LazyLog Component

Source: https://github.com/melloware/react-logviewer/blob/main/README.md

Import the LazyLog component for use in your React application via ES imports or CommonJS require.

```javascript
import { LazyLog } from "@melloware/react-logviewer";
```

```javascript
// using require
const { LazyLog } = require("@melloware/react-logviewer");
```

--------------------------------

### LineContent with Formatted Parts

Source: https://github.com/melloware/react-logviewer/blob/main/src/components/LineContent/README.md

Applies a custom formatting function to each text part within the line data. The 'formatPart' prop accepts a function that takes the text and returns the modified text.

```javascript
<LineContent
  number={10}
  data={[{ text: 'Hello' }, { text: ' world!' }]} 
  formatPart={text => text.replace('world', 'galaxy')}
/>
```

--------------------------------

### Storybook Display Logic CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Controls the display of Storybook UI elements based on their state, hiding blocks when not intended to be shown.

```css
:not(.sb-show-preparing-story) > .sb-preparing-story, :not(.sb-show-preparing-docs) > .sb-preparing-docs, :not(.sb-show-nopreview) > .sb-nopreview, :not(.sb-show-errordisplay) > .sb-errordisplay { display: none; }
```

--------------------------------

### Storybook Preparing Story CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Hides elements not related to the main story content when the story is in a preparing state.

```css
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) { display: none; }
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) { display: none; }
```

--------------------------------

### Storybook Error Display CSS

Source: https://github.com/melloware/react-logviewer/blob/main/docs/iframe.html

Styles for the error display component in Storybook, including background, color, and layout for error messages and code.

```css
.sb-errordisplay {
  background: #f6f9fc;
  color: black;
  z-index: 999999;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  & ol {
    padding-left: 18px;
    margin: 0;
  }
  & h1 {
    font-family: Nunito Sans;
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    font-weight: normal;
    margin: 0;
    &::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #ff4400;
      border-radius: 50%;
      margin-right: 8px;
    }
  }
  & p, & ol {
    font-family: Nunito Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin: 0;
  }
  & li + li {
    margin: 0;
    padding: 0;
    padding-top: 12px;
  }
  & a {
    color: currentColor;
  }
}

.sb-errordisplay_main {
  margin: auto;
  padding: 24px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  border-radius: 6px;
  background: white;
  border: 1px solid #ff0000;
  box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
  gap: 24px;
}

.sb-errordisplay_code {
  padding: 10px;
  flex: 1;
  background: #242424;
  color: #c
```

--------------------------------

### Storybook Font Face Definitions

Source: https://github.com/melloware/react-logviewer/blob/main/docs/index.html

Defines custom font faces for the Storybook UI, including regular and bold weights in both normal and italic styles. Ensure these font files are correctly placed in the specified path.

```css
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2'); }
```

--------------------------------

### LazyLog with Fixed Dimensions

Source: https://github.com/melloware/react-logviewer/blob/main/README.md

Control the dimensions of the LazyLog component by passing 'height' and 'width' props.

```jsx
render(<LazyLog url="http://example.log" height={400} width={800} />, document.getElementById("root"));
```

--------------------------------

### Storybook UI Hiding Styles

Source: https://github.com/melloware/react-logviewer/blob/main/docs/index.html

CSS rule to hide the Storybook root element when it's in a hidden state. This is typically used for specific display control within the Storybook environment.

```css
#storybook-root[hidden] { display: none !important; }
```

--------------------------------

### ScrollFollow HOC Usage

Source: https://github.com/melloware/react-logviewer/blob/main/README.md

Wrap ScrollFollow in a fixed-height element. It accepts a render prop function to manage the 'follow' state based on user scrolling.

```jsx
import React from "react";
import { render } from "react-dom";
import { LazyLog, ScrollFollow } from "@melloware/react-logviewer";

render(
    <div style={{ height: 500, width: 902 }}>
    <ScrollFollow
        startFollowing={true}
        render={({ follow, onScroll }) => (
            <LazyLog url="http://example.log" stream follow={follow} onScroll={onScroll} />
        )}
    />
    </div>,
    document.getElementById("root"),
);
```

--------------------------------

### Override Line Component Default Styles

Source: https://github.com/melloware/react-logviewer/blob/main/README.md

Use defaultProps.style to set the style for the internal Line component. This is useful for simplifying the passing of varied styling objects to multiple components.

```jsx
import Line from "@melloware/react-logviewer/build/Line";

// Use defaultProps.style to set the style for an internal component
Line.defaultProps.style = {
    color: "green",
};

```

--------------------------------

### Unmount LazyLog Component

Source: https://github.com/melloware/react-logviewer/blob/main/tests/e2e/test-app.html

Unmounts the currently mounted LazyLog component from the DOM. This function cleans up the React root and updates the status indicator.

```javascript
window.unmountLog = () => {
  if (window.logRoot) {
    window.logRoot.unmount();
    window.logRoot = null;
    document.getElementById('status').textContent = 'Unmounted';
  }
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.