'react-xsd-tree' is a powerful form designed to create a React Material Tree from any given XSD or ISO 20022 JSON object. This tool 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 your 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;