Quick Start

npm install @uiw/react-xml-reader

importXMLReaderfrom'@uiw/react-xml-reader';<XMLReaderonFileLoaded={(data,iFileInfo,iOriginalFile,text)=>{}}/>

Example

importReact,{useState}from'react';importXMLReaderfrom'@uiw/react-xml-reader';importJsonViewfrom'@uiw/react-json-view';import{lightTheme}from'@uiw/react-json-view/light';exportdefaultfunctionDemo(){const[value,setValue]=useState();return(<React.Fragment><XMLReaderonFileLoaded={(data,iFileInfo,iOriginalFile,text)=>{setValue(data);}}/>{value&&(<JsonViewkeyName="data"value={value}collapsed={false}style={lightTheme}/>)}</React.Fragment>);}

importReact,{useState}from'react';importXMLReaderfrom'@uiw/react-xml-reader';importJsonViewfrom'@uiw/react-json-view';import{lightTheme}from'@uiw/react-json-view/light';import{darkTheme}from'@uiw/react-json-view/dark';exportdefaultfunctionDemo(){const[parserOptions,setParserOptions]=useState({trimValues:true,parseCDATA:true,ignoreAttributes:true,parseNodeValue:true,removeNSPrefix:true,leadingZeros:true,});const[value,setValue]=useState();const[fileInfo,setFileInfo]=useState();const[originalFile,setOriginalFile]=useState();constchange=(evn)=>{constopt={[evn.target.id]:evn.target.checked}if(evn.target.id==='ignoreAttributes'&&opt.ignoreAttributes){opt.attributesGroupName=false;opt.allowBooleanAttributes=false;opt.parseAttributeValue=false;}setParserOptions({ ...parserOptions, ...opt});}return(<React.Fragment><XMLReaderparserOptions={parserOptions}onFileLoaded={(data,iFileInfo,iOriginalFile)=>{setValue(data);setFileInfo(iFileInfo);constfileData={};for(letfileiniOriginalFile){fileData[file]=iOriginalFile[file];}setOriginalFile(fileData);}}/><divstyle={{background:'#fff',padding:10}}><label><inputtype="checkbox"id="preserveOrder"checked={!!parserOptions.preserveOrder}onChange={change}/> Preserve Order</label><br/><label><inputtype="checkbox"id="parseCDATA"checked={!!parserOptions.parseCDATA}onChange={change}/> Parse CDATA as separate property</label><br/><label><inputtype="checkbox"id="alwaysCreateTextNode"checked={!!parserOptions.alwaysCreateTextNode}onChange={change}/> Always create a separate property for text value of a tag.</label><br/><label><inputtype="checkbox"id="trimValues"checked={!!parserOptions.trimValues}onChange={change}/> Trim</label><br/><label><inputtype="checkbox"id="ignoreAttributes"checked={!!parserOptions.ignoreAttributes}onChange={change}/> Ignore attributes</label><br/><labelstyle={{paddingLeft:10}}><inputtype="checkbox"id="attributesGroupName"disabled={!!parserOptions.ignoreAttributes}checked={!!parserOptions.attributesGroupName}onChange={change}/> Group all the attributes</label><br/><labelstyle={{paddingLeft:10}}><inputtype="checkbox"id="allowBooleanAttributes"disabled={!!parserOptions.ignoreAttributes}checked={!!parserOptions.allowBooleanAttributes}onChange={change}/> Allow Boolean Attributes</label><br/><labelstyle={{paddingLeft:10}}><inputtype="checkbox"id="parseAttributeValue"disabled={!!parserOptions.ignoreAttributes}checked={!!parserOptions.parseAttributeValue}onChange={change}/> Parse attribute's value to float / integer / boolean.</label><br/><label><inputtype="checkbox"id="parseNodeValue"checked={!!parserOptions.parseNodeValue}onChange={change}/> Parse text-node's value to float / integer / boolean.</label><br/><label><inputtype="checkbox"id="removeNSPrefix"checked={!!parserOptions.removeNSPrefix}onChange={change}/> Remove namespace string from tag and attribute names.</label><br/><label><inputtype="checkbox"id="leadingZeros"checked={!!parserOptions.leadingZeros}onChange={change}/> Parse Number with leading zeros</label></div>{value&&<JsonViewkeyName="data"value={value}collapsed={false}style={lightTheme}/>}{fileInfo&&<JsonViewkeyName="fileInfo"value={fileInfo}collapsed={false}style={darkTheme}/>}{originalFile&&<JsonViewkeyName="new File()"value={Object.assign(originalFile)}collapsed={false}style={lightTheme}/>}</React.Fragment>);}

importReact,{useState}from'react';importXMLReaderfrom'@uiw/react-xml-reader';importJsonViewfrom'@uiw/react-json-view';import{lightTheme}from'@uiw/react-json-view/light';exportdefaultfunctionDemo(){const[value,setValue]=useState('');return(<React.Fragment><XMLReaderonFileLoaded={(data,iFileInfo,iOriginalFile,text)=>{setValue(text);}}/>{value&&value.length>0&&(<pre>{value}</pre>)}</React.Fragment>);}

Props

import{X2jOptionsOptional}from'fast-xml-parser';exportinterfaceIFileInfo{name:string;size:number;type:string;modifiedAt:number;}exportinterfaceXMLReaderPropsextendsOmit<React.InputHTMLAttributes<HTMLInputElement>,'onError'>{strict?:boolean;encoding?:string;parserOptions?:X2jOptionsOptional;onError?:(error:Error)=>void;onFileLoaded:(data:any,fileInfo:IFileInfo,originalFile:File,text:string)=>void;}declareconstXMLReader:import("react").ForwardRefExoticComponent<XMLReaderProps&import("react").RefAttributes<HTMLInputElement>>;exportdefaultXMLReader;

typeX2jOptionsOptional=Partial<X2jOptions>;typeX2jOptions={preserveOrder:boolean;attributeNamePrefix:string;attributesGroupName:false|string;textNodeName:string;ignoreAttributes:boolean;removeNSPrefix:boolean;allowBooleanAttributes:boolean;parseTagValue:boolean;parseAttributeValue:boolean;trimValues:boolean;cdataPropName:false|string;commentPropName:false|string;/**   * Control how tag value should be parsed. Called only if tag value is not empty   *@returns {undefined|null} `undefined` or `null` to set original value.   *@returns {unknown}   * 1. Different value or value with different data type to set new value. <br>   * 2. Same value to set parsed value if `parseTagValue: true`.   */tagValueProcessor:(tagName:string,tagValue:string,jPath:string,hasAttributes:boolean,isLeafNode:boolean)=>unknown;attributeValueProcessor:(attrName:string,attrValue:string,jPath:string)=>unknown;numberParseOptions:strnumOptions;stopNodes:string[];unpairedTags:string[];alwaysCreateTextNode:boolean;isArray:(tagName:string,jPath:string,isLeafNode:boolean,isAttribute:boolean)=>boolean;processEntities:boolean;htmlEntities:boolean;ignoreDeclaration:boolean;ignorePiTags:boolean;transformTagName:((tagName:string)=>string)|false;transformAttributeName:((attributeName:string)=>string)|false;/**   * Change the tag name when a different name is returned. Skip the tag from parsed result when false is returned.   * Modify `attrs` object to control attributes for the given tag.   *@returns {string} new tag name.   *@returns false to skip the tag   */updateTag:(tagName:string,jPath:string,attrs:{[k:string]:string})=>string|boolean;}

Development

# Step 1, run first, listen to the component compile and output the .js file# listen for compilation output type .d.ts filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

npm run build

Related

Contributors

License