### Run documentation locally

Source: https://github.com/patternfly/react-log-viewer/blob/main/README.md

Commands to install dependencies, build, and start the documentation server locally.

```bash
yarn install && yarn build && yarn start
```

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

### With search

Source: https://github.com/patternfly/react-log-viewer/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

Log viewer with search functionality.

```javascript
import React, { useState, Fragment, useRef } from 'react';
import { LogViewer, LogViewerSearch, LogViewerContext } from '@patternfly/react-log-viewer';
import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';

export const BasicSearchLogViewer = () => {
  const [isSearchFocused, setIsSearchFocused] = useState(false);
  const [isCaseSensitive, setIsCaseSensitive] = useState(false);
  const [isRegex, setIsRegex] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResult, setSearchResult] = useState('');
  const [searchIndex, setSearchIndex] = useState(0);
  const logViewerRef = useRef();

  const onSearch = (term, isCaseSensitive, isRegex) => {
    setSearchTerm(term);
    setIsCaseSensitive(isCaseSensitive);
    setIsRegex(isRegex);
    setSearchResult('');
    setSearchIndex(0);
  };

  const onClear = () => {
    setSearchTerm('');
    setSearchResult('');
    setSearchIndex(0);
  };

  const onNext = () => {
    setSearchIndex(searchIndex + 1);
  };

  const onPrevious = () => {
    setSearchIndex(searchIndex - 1);
  };

  const onSearchFocus = (isFocused) => {
    setIsSearchFocused(isFocused);
  };

  const onSearchResult = (result) => {
    setSearchResult(result);
  };

  const onSearchIndex = (index) => {
    setSearchIndex(index);
  };

  const searchControls = (
    <Fragment>
      <Toolbar id="log-viewer-search-toolbar">
        <ToolbarContent>
          <ToolbarItem>
            <LogViewerSearch
              onChange={onSearch}
              onClear={onClear}
              onNext={onNext}
              onPrevious={onPrevious}
              onFocus={onSearchFocus}
              onSearchResult={onSearchResult}
              onSearchIndex={onSearchIndex}
              isCaseSensitive={isCaseSensitive}
              isRegex={isRegex}
              searchIndex={searchIndex}
              searchTerm={searchTerm}
              searchResult={searchResult}
              isSearchFocused={isSearchFocused}
            />
          </ToolbarItem>
          <ToolbarItem>
            <Checkbox
              label="Case sensitive"
              id="log-viewer-case-sensitive"
              isChecked={isCaseSensitive}
              onChange={setIsCaseSensitive}
            />
          </ToolbarItem>
          <ToolbarItem>
            <Checkbox label="Regex" id="log-viewer-regex" isChecked={isRegex} onChange={setIsRegex} />
          </ToolbarItem>
        </ToolbarContent>
      </Toolbar>
    </Fragment>
  );

  return (
    <LogViewer
      ref={logViewerRef}
      data={data}
      theme={'dark'}
      height={300}
      customControls={searchControls}
      onSearch={onSearch}
      onClear={onClear}
      onNext={onNext}
      onPrevious={onPrevious}
      onSearchFocus={onSearchFocus}
      onSearchResult={onSearchResult}
      onSearchIndex={onSearchIndex}
      isCaseSensitive={isCaseSensitive}
      isRegex={isRegex}
      searchTerm={searchTerm}
      searchResult={searchResult}
      searchIndex={searchIndex}
      isSearchFocused={isSearchFocused}
    />
  );
};

```

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

### Basic

Source: https://github.com/patternfly/react-log-viewer/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

Basic example of the react-log-viewer component.

```javascript
import React from 'react';
import { LogViewer } from '@patternfly/react-log-viewer';
import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';

export const BasicLogViewer = () => (
  <LogViewer data={data} theme={'dark'} height={300} />);

```

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

### With complex toolbar

Source: https://github.com/patternfly/react-log-viewer/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

Log viewer with a custom toolbar.

```javascript
import React, { useState, Fragment, useRef } from 'react';
import { LogViewer, LogViewerSearch, LogViewerContext } from '@patternfly/react-log-viewer';
import { Button, Checkbox, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';

export const CustomControlLogViewer = () => {
  const [isSearchFocused, setIsSearchFocused] = useState(false);
  const [isCaseSensitive, setIsCaseSensitive] = useState(false);
  const [isRegex, setIsRegex] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResult, setSearchResult] = useState('');
  const [searchIndex, setSearchIndex] = useState(0);
  const logViewerRef = useRef();

  const onSearch = (term, isCaseSensitive, isRegex) => {
    setSearchTerm(term);
    setIsCaseSensitive(isCaseSensitive);
    setIsRegex(isRegex);
    setSearchResult('');
    setSearchIndex(0);
  };

  const onClear = () => {
    setSearchTerm('');
    setSearchResult('');
    setSearchIndex(0);
  };

  const onNext = () => {
    setSearchIndex(searchIndex + 1);
  };

  const onPrevious = () => {
    setSearchIndex(searchIndex - 1);
  };

  const onSearchFocus = (isFocused) => {
    setIsSearchFocused(isFocused);
  };

  const onSearchResult = (result) => {
    setSearchResult(result);
  };

  const onSearchIndex = (index) => {
    setSearchIndex(index);
  };

  const searchControls = (
    <Fragment>
      <Toolbar id="log-viewer-search-toolbar">
        <ToolbarContent>
          <ToolbarItem>
            <LogViewerSearch
              onChange={onSearch}
              onClear={onClear}
              onNext={onNext}
              onPrevious={onPrevious}
              onFocus={onSearchFocus}
              onSearchResult={onSearchResult}
              onSearchIndex={onSearchIndex}
              isCaseSensitive={isCaseSensitive}
              isRegex={isRegex}
              searchIndex={searchIndex}
              searchTerm={searchTerm}
              searchResult={searchResult}
              isSearchFocused={isSearchFocused}
            />
          </ToolbarItem>
          <ToolbarItem>
            <Checkbox
              label="Case sensitive"
              id="log-viewer-case-sensitive"
              isChecked={isCaseSensitive}
              onChange={setIsCaseSensitive}
            />
          </ToolbarItem>
          <ToolbarItem>
            <Checkbox label="Regex" id="log-viewer-regex" isChecked={isRegex} onChange={setIsRegex} />
          </ToolbarItem>
          <ToolbarItem>
            <Button variant="primary">Custom action</Button>
          </ToolbarItem>
        </ToolbarContent>
      </Toolbar>
    </Fragment>
  );

  return (
    <LogViewer
      ref={logViewerRef}
      data={data}
      theme={'dark'}
      height={300}
      customControls={searchControls}
      onSearch={onSearch}
      onClear={onClear}
      onNext={onNext}
      onPrevious={onPrevious}
      onSearchFocus={onSearchFocus}
      onSearchResult={onSearchResult}
      onSearchIndex={onSearchIndex}
      isCaseSensitive={isCaseSensitive}
      isRegex={isRegex}
      searchTerm={searchTerm}
      searchResult={searchResult}
      searchIndex={searchIndex}
      isSearchFocused={isSearchFocused}
    />
  );
};

```

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

### With header component

Source: https://github.com/patternfly/react-log-viewer/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

Log viewer with a custom header component.

```javascript
import React from 'react';
import { LogViewer } from '@patternfly/react-log-viewer';
import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';

const CustomHeader = () => (
  <div style={{ padding: '10px', borderBottom: '1px solid #ccc' }}>Custom Header</div>
);

export const HeaderComponentLogViewer = () => (
  <LogViewer data={data} theme={'dark'} height={300} header={<CustomHeader />} />
);

```

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

### With footer component

Source: https://github.com/patternfly/react-log-viewer/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

Log viewer with a custom footer component.

```javascript
import React from 'react';
import { LogViewer } from '@patternfly/react-log-viewer';
import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';

const CustomFooter = () => (
  <div style={{ padding: '10px', borderTop: '1px solid #ccc' }}>Custom Footer</div>
);

export const FooterComponentLogViewer = () => (
  <LogViewer data={data} theme={'dark'} height={300} footer={<CustomFooter />} />
);

```

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

### With ANSI color logs

Source: https://github.com/patternfly/react-log-viewer/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/examples/basic.md

Log viewer with ANSI color support.

```javascript
import React from 'react';
import { LogViewer } from '@patternfly/react-log-viewer';
import { data } from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';

// Sample data with ANSI escape codes
const ansiData = [
  '\u001b[31mThis is a red log message\u001b[0m',
  '\u001b[32mThis is a green log message\u001b[0m',
  '\u001b[33mThis is a yellow log message\u001b[0m',
  'This is a normal log message'
];

export const ANSIColorLogViewer = () => (
  <LogViewer data={ansiData} theme={'dark'} height={300} />
);

```

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

### Commands

Source: https://github.com/patternfly/react-log-viewer/blob/main/CLAUDE.md

Build, test, and lint commands for the react-log-viewer library.

```bash
yarn build          # Build the library
yarn test           # Run unit tests
yarn lint           # Lint the codebase
```

```bash
yarn build:docs && yarn serve:docs  # Start docs server
yarn test:a11y                       # Run a11y tests (in separate terminal)
```

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

### With complex toolbar

Source: https://github.com/patternfly/react-log-viewer/blob/main/packages/module/patternfly-docs/content/extensions/react-log-viewer/demos/LogViewer.md

Log viewer with a complex toolbar.

```javascript
import { useState, useRef, useEffect, Fragment } from 'react';
import {
  data
} from '@patternfly/react-log-viewer/patternfly-docs/content/extensions/react-log-viewer/examples/realTestData.js';
import { LogViewer, LogViewerSearch } from '@patternfly/react-log-viewer';
import {
  Badge,
  Button,
  MenuToggle,
  Select,
  SelectList,
  SelectOption,
  Tooltip,
  Toolbar,
  ToolbarContent,
  ToolbarGroup,
  ToolbarItem,
  ToolbarToggleGroup
} from '@patternfly/react-core';
import OutlinedPlayCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-play-circle-icon';
import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';

export const ComplexToolbarLogViewer = () => {
  const [isSelectOpen, setIsSelectOpen] = useState(false);
  const [selected, setSelected] = useState('All logs');
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isLive, setIsLive] = useState(true);
  const [logData, setLogData] = useState(data);
  const logViewerRef = useRef(null);

  const onSelect = (event, selection) => {
    setSelected(selection);
    setIsSelectOpen(false);
  };

  const onToggleSelect = () => {
    setIsSelectOpen(!isSelectOpen);
  };

  const onToggleSearch = () => {
    setIsSearchOpen(!isSearchOpen);
  };

  const onToggleLive = () => {
    setIsLive(!isLive);
  };

  const onDownload = () => {
    // In a real application, you would trigger a download of the log data here.
    console.log('Download logs');
  };

  useEffect(() => {
    let intervalId;
    if (isLive) {
      intervalId = setInterval(() => {
        setLogData(prevData => [
          ...prevData,
          `New log entry ${Date.now()}`
        ]);
      }, 1000);
    }
    return () => clearInterval(intervalId);
  }, [isLive]);

  const toolbar = (
    <Toolbar id="log-viewer-toolbar" className="pf-m-toggle-group-container">
      <ToolbarContent>
        <ToolbarToggleGroup toggleIcon={<EllipsisVIcon />}>
          <ToolbarGroup variant="icon-button-group">
            <ToolbarItem>
              <Tooltip content="Download logs">
                <Button variant="plain" aria-label="Download logs" onClick={onDownload} icon={<DownloadIcon />}>
                  <DownloadIcon />
                </Button>
              </Tooltip>
            </ToolbarItem>
            <ToolbarItem>
              <Tooltip content={isLive ? 'Pause live logging' : 'Resume live logging'}>
                <Button variant="plain" aria-label="Toggle live logging" onClick={onToggleLive} icon={isLive ? <PauseIcon /> : <PlayIcon />}>
                  <ExpandIcon />
                </Button>
              </Tooltip>
            </ToolbarItem>
          </ToolbarGroup>
        </ToolbarToggleGroup>
        <ToolbarGroup>
          <ToolbarItem>
            <Select
              id="log-viewer-select"
              isOpen={isSelectOpen}
              selected={selected}
              onSelect={onSelect}
              onToggle={onToggleSelect}
              toggleIcon={<OutlinedPlayCircleIcon />}
              aria-label="Select log level"
            >
              <SelectList>
                <SelectOption value="All logs">All logs</SelectOption>
                <SelectOption value="Info">Info</SelectOption>
                <SelectOption value="Warning">Warning</SelectOption>
                <SelectOption value="Error">Error</SelectOption>
              </SelectList>
            </Select>
          </ToolbarItem>
        </ToolbarGroup>
        <ToolbarGroup>
          <ToolbarItem>
            <LogViewerSearch
              isOpen={isSearchOpen}
              onToggle={onToggleSearch}
              placeholder="Search"
            />
          </ToolbarItem>
        </ToolbarGroup>
      </ToolbarContent>
    </Toolbar>
  );

  return (
    <Fragment>
      {toolbar}
      <LogViewer
        ref={logViewerRef}
        data={logData}
        height={500}
        toolbar={toolbar}
        theme=
```

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