react-xml-reader

Quick Start

npm install @uiw/react-xml-reader

import XMLReader from '@uiw/react-xml-reader';

<XMLReader
  onFileLoaded={(data, iFileInfo, iOriginalFile, text) => { }}
/>

Example

import React, { useState } from 'react';
import XMLReader from '@uiw/react-xml-reader';
import JsonView from '@uiw/react-json-view';
import { lightTheme } from '@uiw/react-json-view/light';

export default function Demo() {
  const [value, setValue] = useState();
  return (
    <React.Fragment>
      <XMLReader
        onFileLoaded={(data, iFileInfo, iOriginalFile, text) => {
          setValue(data);
        }}
      />
      {value && (
        <JsonView
          keyName="data"
          value={value}
          collapsed={false}
          style={lightTheme}
        />
      )}
    </React.Fragment>
  );
}

import React, { useState } from 'react';
import XMLReader from '@uiw/react-xml-reader';
import JsonView from '@uiw/react-json-view';
import { lightTheme } from '@uiw/react-json-view/light';
import { darkTheme } from '@uiw/react-json-view/dark';

export default function Demo() {
  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();

  const change = (evn) => {
    const opt = { [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>
      <XMLReader
        parserOptions={parserOptions}
        onFileLoaded={(data, iFileInfo, iOriginalFile) => {
          setValue(data);
          setFileInfo(iFileInfo);
          const fileData = {};
          for (let file in iOriginalFile) {
            fileData[file] = iOriginalFile[file];
          }
          setOriginalFile(fileData);
        }}
      />
      <div style={{ background: '#fff', padding: 10 }}>
        <label>
          <input type="checkbox" id="preserveOrder" checked={!!parserOptions.preserveOrder} onChange={change} /> Preserve Order
        </label>
        <br />
        <label>
          <input type="checkbox" id="parseCDATA" checked={!!parserOptions.parseCDATA} onChange={change} /> Parse CDATA as separate property
        </label>
        <br />
        <label>
          <input type="checkbox" id="alwaysCreateTextNode" checked={!!parserOptions.alwaysCreateTextNode} onChange={change} /> Always create a separate property for text value of a tag.
        </label>
        <br />
        <label>
          <input type="checkbox" id="trimValues" checked={!!parserOptions.trimValues} onChange={change} /> Trim
        </label>
        <br />
        <label>
          <input type="checkbox" id="ignoreAttributes" checked={!!parserOptions.ignoreAttributes} onChange={change} /> Ignore attributes
        </label>
        <br />
        <label style={{ paddingLeft: 10 }}>
          <input type="checkbox" id="attributesGroupName" disabled={!!parserOptions.ignoreAttributes} checked={!!parserOptions.attributesGroupName} onChange={change} /> Group all the attributes
        </label>
        <br />
        <label style={{ paddingLeft: 10 }}>
          <input type="checkbox" id="allowBooleanAttributes" disabled={!!parserOptions.ignoreAttributes} checked={!!parserOptions.allowBooleanAttributes} onChange={change} /> Allow Boolean Attributes
        </label>
        <br />
        <label style={{ paddingLeft: 10 }}>
          <input type="checkbox" id="parseAttributeValue" disabled={!!parserOptions.ignoreAttributes} checked={!!parserOptions.parseAttributeValue} onChange={change} /> Parse attribute's value to float / integer / boolean.
        </label>
        <br />
        <label>
          <input type="checkbox" id="parseNodeValue" checked={!!parserOptions.parseNodeValue} onChange={change} /> Parse text-node's value to float / integer / boolean.
        </label>
        <br />
        <label>
          <input type="checkbox" id="removeNSPrefix" checked={!!parserOptions.removeNSPrefix} onChange={change} /> Remove namespace string from tag and attribute names.
        </label>
        <br />
        <label>
          <input type="checkbox" id="leadingZeros" checked={!!parserOptions.leadingZeros} onChange={change} /> Parse Number with leading zeros
        </label>
      </div>

      {value && <JsonView keyName="data" value={value} collapsed={false} style={lightTheme} />}
      {fileInfo && <JsonView keyName="fileInfo" value={fileInfo} collapsed={false} style={darkTheme} />}
      {originalFile && <JsonView keyName="new File()" value={Object.assign(originalFile)} collapsed={false} style={lightTheme} />}
    </React.Fragment>
  );
}

import React, { useState } from 'react';
import XMLReader from '@uiw/react-xml-reader';
import JsonView from '@uiw/react-json-view';
import { lightTheme } from '@uiw/react-json-view/light';

export default function Demo() {
  const [value, setValue] = useState('');
  return (
    <React.Fragment>
      <XMLReader
        onFileLoaded={(data, iFileInfo, iOriginalFile, text) => {
          setValue(text);
        }}
      />
      {value && value.length > 0 && (
        <pre>{value}</pre>
      )}
    </React.Fragment>
  );
}

Props

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

type X2jOptionsOptional = Partial<X2jOptions>;
type X2jOptions = {
  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 file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start

npm run build

Related

Contributors

License