https://github.com/pixelbyaj/react-xsd-tree
Convert XSD to Tree View
https://github.com/pixelbyaj/react-xsd-tree
Last synced: about 1 month ago
JSON representation
Convert XSD to Tree View
- Host: GitHub
- URL: https://github.com/pixelbyaj/react-xsd-tree
- Owner: pixelbyaj
- License: mit
- Created: 2024-07-17T06:53:07.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-26T18:33:24.000Z (5 months ago)
- Last Synced: 2025-03-28T23:21:48.540Z (about 2 months ago)
- Language: TypeScript
- Size: 204 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactXsdTree
This form is used to design React Material Tree using any given XSD/ISO 20022 Json object. .
[](https://npmjs.org/package/react-xsd-tree)
## [DEMO](https://stackblitz.com/edit/reactxsdtree?file=README.md)
## Features
- 🔥 Automatic tree generation from the given XSD Json
- ⚡️ Supports ISO 20022 messages:
## How to consume
1. Install npm package ngx-xml-message.
```console
npm i react-xsd-tree
```
```tsx
import React from "react";
import { camt53 } from "./models/model"; // model
import ReactXsdTree from "./components/ReactXsdTree";
import { ReactXsdTree, SchemaElement, useReactXsdTreeViewApiRef } from "react-xsd-tree";
const App: React.FC = () => {
const reactXsdTreeApiRef = useReactXsdTreeViewApiRef();
const onSelect = (event, item: SchemaElement) => {
console.log(item);
};
const handleClick = (event) => {
reactXsdTreeApiRef.current?.selectItem(
event,
"document_bktocstmrstmt_grphdr_credttm"
);
};
return (
<>
Click Me
>
);
};
export default App;
```
## Convert XSD to JSON
1. Install npm package xsd-json-converter.
```console
npm i xsd-json-converter
```
## How to Use
```console
xjc
```
### Example
#### Linux
```console
xjc /mnt/c/source/xsd/camt.053.001.10.xsd /mnt/c/source/xsd/camt.053.json
```
#### Windows
```console
xjc C:/source/xsd/camt.053.001.10.xsd C:/source/xsd/camt.053.json
```