https://github.com/abdheshnayak/react-highlightjs-logs
Lightweight, Easy to use logs component built on reactjs.
https://github.com/abdheshnayak/react-highlightjs-logs
highlightjs logs react render viewport
Last synced: 5 months ago
JSON representation
Lightweight, Easy to use logs component built on reactjs.
- Host: GitHub
- URL: https://github.com/abdheshnayak/react-highlightjs-logs
- Owner: abdheshnayak
- License: mit
- Created: 2022-08-06T16:03:28.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-29T08:52:10.000Z (almost 2 years ago)
- Last Synced: 2025-01-16T03:50:08.536Z (6 months ago)
- Topics: highlightjs, logs, react, render, viewport
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-highlightjs-logs
- Size: 1.08 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React HighlightJs Logs
## Demo
[https://react-highlightjs-logs.netlify.app/](https://react-highlightjs-logs.netlify.app/)
[code-sandbox](https://r3r5y4.csb.app)
## Usage
### Installation
Run the following command in your terminal to install the package.
```bash
npm i react-highlightjs-logs
```
### Importing
You can import the component as shown below.
```javascript
import { HighlightJsLogs } from "react-highlightjs-logs"
```
### Importing Styles
You can import the component as shown below.
```javascript
import 'react-highlightjs-logs/dist/index.css'
```
### Importing Themes
This package provides default theme that's tokyo-night which can be overriden by importing the theme of your choice from highlight.js website. for that you have to add one attribute `removeDefaultTheme`
```javascript
```
You can also use any of the [highlight.js](https://github.com/highlightjs/highlight.js/tree/main/src/styles) themes. you can get themes from [highlight.js themes](https://github.com/highlightjs/highlight.js/tree/main/src/styles) or you visit the [highlight.js demo](https://highlightjs.org/static/demo) for more.
#### With plain data
If you have plain data then you can use the component as shown below.
```javascript
function App() {
return (
);
}
```
#### With url
With url you can use the component as shown below.
```javascript
function App() {
return (
);
}
```
### With websocket
If you wanna use with websocket then use as the shown below.
```javascript
function App() {
return (
);
}
```
### enablesearch, follow, selectableLines
You can also enable searching, autoscroll to last line, and highlight line on hover by the following properties.
```javascript
function App() {
return (
);
}
```
By default all the values are true you can disable this by changing it's value to false.
### Hide scrollbar
You can hide the scrollbar by simpaly adding noScrollBar attribute as shown below. The default value is false so scrollbar will be visible if you don't add.
```javascript
function App() {
return (
);
}
```
### Width and Height
You need to specify width and height for better fit in your ui. by default width is 600px and height is 400px. you can specify these as shown below.
```javascript
function App() {
return (
);
}
```
### Font Size
You can also manage Font Size by adding fontSize property. It's Number value and can be provided as shown below. default fontSize is 14.
```javascript
function App() {
return (
);
}
```
### Define your own loading component
You can also define your own loading component as shown below.
```javascript
function App() {
return (
Loading...}
/>
);
}
```
### Define your own loading component
Define your action components easily by providing component to the property actionComponent as shown below.
```javascript
function App() {
return (
Refresh
}
/>
);
}
```
## Technology
- highlight.js for syntax highlighting
- websocket for socket connection
- axios for fetching url data
- react-icons for icons
- tailwindcss for design
- tokyo-night default theme
## Development and Contributing
This repository uses highlight.js, websocket, axios, react-icons and tailwindcss for developing, previewing and building react components. to get started
- Fork and clone this repo
- Install the dependencies with npm or pnpm
- Start development server with npm start. This will launch a preview screen. Open a browser to http://localhost:3000 to preview the React Component.
- Use CTRL-C to exit the preview.
- Use npm run build to generate the compiled component for publishing to npm.
Feel free to open an issue, submit a pull request, or contribute however you would like. Understand that this documentation is still a work in progress, so file and issue or submit a PR to ask questions or make imporvements. Thanks!