React-policy-topology NPM

PolicyTopology Component

PolicyTopology is a reusable React component for visualizing policy topologies using DOT strings.

PolicyTopology

Getting Started

Installation

To use the PolicyTopology component, you need to install the necessary dependencies.

First, make sure you have Node.js (>=18) and npm installed. Then, in your project directory, run:

npm install react react-dom react-policy-topology

This will install react-policy-topology along with its peer dependencies, react and react-dom.

Usage

To use the PolicyTopology component in your React application, follow these steps:

Import the PolicyTopology component:

import React from 'react';
import PolicyTopology from 'react-policy-topology';

Use the component in your application:

const App = () => {
  const dotString = `your DOT string here`;

  return (
    <div className="App">
      <PolicyTopology dotString={dotString} />
    </div>
  );
};

export default App;

Props

dotString (string): The DOT string representing the graph to visualise.

Development

To start the development server, run:

npm start

This runs the app in development mode. Open http://localhost:3000 to view it in your browser.

Building

To build the app for production, run:

npm run build

The build artifacts will be stored in the build/ directory.

Testing

To run the test suite, run:

npm test

Deployment

To deploy the app, follow the deployment instructions specific to your hosting provider.

Example App

An example app is included in the repository to demonstrate the usage of the PolicyTopology component. To run the example app, navigate to the example directory and follow the instructions in the README file.