https://github.com/kuadrant/react-policy-topology
Reusable React component for visualising policy topologies (from policy-machinery) using DOT strings.
https://github.com/kuadrant/react-policy-topology
Last synced: 12 days ago
JSON representation
Reusable React component for visualising policy topologies (from policy-machinery) using DOT strings.
- Host: GitHub
- URL: https://github.com/kuadrant/react-policy-topology
- Owner: Kuadrant
- License: apache-2.0
- Created: 2024-08-07T15:29:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-28T17:08:33.000Z (over 1 year ago)
- Last Synced: 2025-01-28T18:23:29.679Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 596 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PolicyTopology Component
[](https://www.npmjs.com/package/react-policy-topology)
`PolicyTopology` is a reusable React component for visualizing policy topologies using DOT strings.
## 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:
```bash
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:
1. Import the `PolicyTopology` component:
```jsx
import React from 'react';
import PolicyTopology from 'react-policy-topology';
```
2. Use the component in your application:
```jsx
const App = () => {
const dotString = `your DOT string here`;
return (
);
};
export default App;
```
### Props
- `dotString` (string): The DOT string representing the graph to visualise.
### Development
To start the development server, run:
```bash
npm start
```
This runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
### Building
To build the app for production, run:
```bash
npm run build
```
The build artifacts will be stored in the `build/` directory.
### Testing
To run the test suite, run:
```bash
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.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request.
## License
This project is licensed under the Apache v2 License.