react-xml-ui
'react-xml-ui' is designed to dynamically generate read-only forms using any XML or ISO 20022 message. This versatile UI library is ideal for creating ISO 20022- or MX-compliant forms without manual coding, making it easy to present complex financial messages in a clear, user-friendly format. Perfect for applications that require displaying structured data as part of ISO 20022 or MX workflows, react-xml-ui ensures efficient and dynamic form rendering.
Features
- Automatic React forms generation
- Supports ISO 20022 messages
How to consume
npm i react-xml-ui
How to consume
import { ReactXmlUI } from 'react-xml-ui';
function App() {
const [xmlMessage, setXmlMessage] = useState('')
useEffect(()=>{
setXmlMessage(message);
},[xmlMessage])
return (
<>
<ReactXmlUI xmlString={xmlMessage}></ReactXmlUI>
</>
)
}
export default App
Sample XML
<?xml version="1.0" encoding="UTF-8"?>
<Document xmlns="urn:iso:std:iso:20022:tech:xsd:camt.053.001.09">
<Hdr>
<MsgId>ABC-123456</MsgId>
<CreDtTm>2023-06-20T09:30:00Z</CreDtTm>
</Hdr>
<Rpt>
<Id>ACC-78901234</Id>
<ElctrncSeqNb>1</ElctrncSeqNb>
<FrToDt>
<FrDtTm>2023-06-01T00:00:00Z</FrDtTm>
<ToDtTm>2023-06-30T23:59:59Z</ToDtTm>
</FrToDt>
<Acct>
<Id>
<IBAN>GB99X12345678901234567</IBAN>
</Id>
</Acct>
<Bal>
<Tp>
<CdOrPrtry>
<Cd>PRCD</Cd>
</CdOrPrtry>
</Tp>
<Amt Ccy="EUR">100000.00</Amt>
<CdtDbtInd>CRDT</CdtDbtInd>
</Bal>
<Bal>
<Tp>
<CdOrPrtry>
<Cd>CLBD</Cd>
</CdOrPrtry>
</Tp>
<Amt Ccy="EUR">2000.00</Amt>
<CdtDbtInd>DBIT</CdtDbtInd>
</Bal>
<Ntry>
<Amt Ccy="EUR">1000.00</Amt>
<CdtDbtInd>CRDT</CdtDbtInd>
<Sts>BOOK</Sts>
<BookgDt>
<Dt>2023-06-05</Dt>
</BookgDt>
<ValDt>
<Dt>2023-06-05</Dt>
</ValDt>
<AcctSvcrRef>XYZ-987654</AcctSvcrRef>
<NtryDtls>
<TxDtls>
<Refs>
<EndToEndId>XYZ-123456</EndToEndId>
</Refs>
<AmtDtls>
<TxAmt>
<Amt Ccy="EUR">1000.00</Amt>
</TxAmt>
</AmtDtls>
<RltdPties>
<Dbtr>
<Nm>John Doe</Nm>
<Id>
<PrvtId>
<Othr>
<Id>1234567890</Id>
</Othr>
</PrvtId>
</Id>
</Dbtr>
<Cdtr>
<Nm>Company XYZ</Nm>
</Cdtr>
</RltdPties>
<RmtInf>
<Ustrd>Payment for services rendered Payment for services rendered Payment for services rendered</Ustrd>
</RmtInf>
</TxDtls>
</NtryDtls>
</Ntry>
<!-- Additional Ntry elements can be added for more transactions -->
</Rpt>
</Document>