`\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { LazyLog, ScrollFollow } from \"@melloware/react-logviewer\";\n\nrender(\n
\n (\n \n )}\n />\n
,\n document.getElementById(\"root\"),\n);\n```\n\n## Styling\n\nAll of the components exposed from react-lazylog use CSS modules to contain its styles to each individual component. If\nyou wish to override these styles, there are a few techniques you can use.\n\n### `style` and `containerStyle`\n\nFor the core container of `
`, you can pass a `style` object prop to affect many styles.\nFor affecting the look or behavior of the scrollable region of these components, use the `containerStyle` prop with a\nstyling object.\n\n### `defaultProps.style`\n\nFor many react-logviewer components, continually passing varied styling objects is tedious. To make this simpler, you can\noverride the `defaultProps.style` of any desired component to override styles of that component. For example:\n\n```jsx\nimport Line from \"@melloware/react-logviewer/build/Line\";\n\n// Use defaultProps.style to set the style for an internal component\nLine.defaultProps.style = {\n color: \"green\",\n};\n```\n\n**Note: overriding the ANSI colors and styles is currently undocumented, and will probably need some source-diving to\nfigure out. I would gladly accept a pull request that could improve the styling API.**\n\n### CSS stylesheets\n\nIf you are using CSS stylesheets, you can target the main virtual `LazyList` component with the `react-lazylog`\nclass name. From there you can target the individual `div` lines, `a` line numbers, or `span` line content.\n\n## Sub-components\n\nreact-lazylog uses a number of sub-components internally to render individual parts of the log-viewing component:\n\n### `
`\n\nA single row of content, containing both the line number and any text content within the line.\n\n### `
`\n\nThe line number of a single line. The anchor contained within is interactive, and will highlight the entire line upon\nselection.\n\n### `
`\n\nThe container of all the individual pieces of content that is on a single line. May contain one or more `LinePart`s\ndepending on ANSI parsing.\n\n### `
`\n\nAn individual segment of text within a line. When the text content is ANSI-parsed, each boundary is placed within its\nown `LinePart` and styled separately (colors, text formatting, etc.) from the rest of the line's content.\n\n## Technology\n\n- [Virtua](https://github.com/inokawa/virtua) for efficiently rendering large lines of data\n- `fetch` API for efficiently requesting data with array buffers and binary streams\n- [ansiparse](https://www.npmjs.com/package/ansiparse) for nice log styling, like Travis\n- [mitt](https://www.npmjs.com/package/mitt) for dead-simple events to manage streaming lifecycle\n- [Immutable](https://www.npmjs.com/package/immutable) for efficiently storing and managing very large collections of lines and highlight ranges\n- `Uint8Array` for dealing with text content as binary, allows for conditionally rendering partial data and decoding everything without crashing your browser\n\n## Development and Contributing\n\n- Fork and clone this repo.\n- Install the dependencies with `npm`.\n- Start the development server with `npm run storybook`. This will launch a StoryBook instance.\n Open a browser to http://localhost:6006 to preview the React components.\n- Use CTRL-C to exit the StoryBook.\n- Use `npm run build` to generate the compiled component for publishing to npm.\n \n## Publishing\n\nAdjust the version in the `package.json` if necessary and commit files.\nThen simply \"Publish a Release\" and the workflow will handle publishing to NPM.\n\n## License\n\nLicensed under the [Mozilla Public License 2.0](https://opensource.org/license/mpl-2-0/) license.\n\n`SPDX-License-Identifier: Mozilla Public License 2.0`\n","readmeFilename":"README.md"}