'react-xsd-tree' is a powerful tool designed to generate a React Material Tree from any given XSD or ISO 20022 JSON object. This library simplifies the visualization of complex data structures, allowing developers to effortlessly build interactive and dynamic tree components. With a focus on React Material Design principles, react-xsd-tree transforms XSD and ISO 20022 data into a user-friendly format, enhancing both usability and the overall experience within your applications.
npm i react-xsd-tree
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 (
<>
<button onClick={handleClick}>Click Me</button>
<ReactXsdTree
ref={reactXsdTreeApiRef}
model={camt53}
onSelectedItemsChange={onSelect}></ReactXsdTree>
</>
);
};
export default App;