Skip to content

open-rpc/logs-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logs-React

What is Logs-React?

This project is a React Component that displays a list of JSON-RPC Requests and Responses.

Features:

  • Displays Requests and Responses in a time-series format
  • Supports JSON-RPC Notifications

How do I use this?

Installation:
npm install --save @open-rpc/logs-react
Usage:
import JSONRPCLogger, {JSONRPCLog} from "@open-rpc/logs-react";

// Get these logs how ever you want
const logs: JSONRPCLog[] = [{
    type: "request",
    method: "test",
    timestamp: new Date(),
    payload: {
        jsonrpc: "2.0",
        method: "foo"
    }
}];

<JSONRPCLogger logs={logs} />
Props:
Name Type Function
logs JSONRPCLog The list of JSON-RPC calls that logs-react will display
openRecentPayload boolean Default: false. If true, the payload of the most recent response will be expanded automatically.
sidebarAlign "left" or "right" Default: "left". Determines which side of the screen that the method filter sidebar will appear on.
sidebarOpen boolean Default: true. If true, the filter sidebar will be opened by default, if false it will be closed.
Example in a new project:
create a new typescript project with create-react-app
npx create-react-app <appname> --typescript
cd <appname>
npm install .
npm install @open-rpc/logs-react --save
index.ts
import React from 'react';
import ReactDOM from 'react-dom';
import JSONRPCLogger, {JSONRPCLog} from "@open-rpc/logs-react";

const logs: JSONRPCLog[] = [{
    type: "request",
    method: "test",
    timestamp: new Date(),
    payload: {
        jsonrpc: "2.0",
        method: "foo"
    }
}];

ReactDOM.render(<JSONRPCLogger logs={logs} />, document.getElementById("root"));

Contributing

How to contribute, build and release are outlined in CONTRIBUTING.md, BUILDING.md and RELEASING.md respectively. Commits in this repository follow the CONVENTIONAL_COMMITS.md specification.