react-xsd-tree

'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.

Features

Automatic tree generation from the given XSD Json
Supports ISO 20022 messages

NOTE: The library don't support direct execution of XSD and user need to convert XSD to JSON using xsd-json-converter npm package component OR ISO20022.Suite

StackBlitz DEMO

Install

npm i react-xsd-tree

How to consume

                        
                            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;