HTML to React parser that works on both the server (Node.js) and the client (browser):

Overview

html-react-parser

NPM

NPM version Build Status codecov Dependency status NPM downloads Discord

HTML to React parser that works on both the server (Node.js) and the client (browser):

HTMLReactParser(string[, options])

The parser converts an HTML string to one or more React elements.

To replace an element with another element, check out the replace option.

Example

const parse = require('html-react-parser');
parse('

Hello, World!

'
); // React.createElement('p', {}, 'Hello, World!')

Repl.it | JSFiddle | CodeSandbox | TypeScript | Examples

Table of Contents
  • Install
  • Usage
  • Migration
  • FAQ
    • Is this XSS safe?
    • Does invalid HTML get sanitized?
    • Are ">
      
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js">script>
      <script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js">script>
      <script>
        window.HTMLReactParser(/* string */);
      script>

      Usage

      Import or require the module:

      // ES Modules
      import parse from 'html-react-parser';
      
      // CommonJS
      const parse = require('html-react-parser');

      Parse single element:

      parse('

      single

      '
      );

      Parse multiple elements:

      parse('
    • Item 1
    • Item 2
    • '
      );

      Make sure to render parsed adjacent elements under a parent element:

      <ul>
        {parse(`
          
    • Item 1
    • Item 2
    • `)} </ul>

      Parse nested elements:

      parse('

      Lorem ipsum

      '
      );

      Parse element with attributes:

      ' ); ">
      parse(
        '
               
      '
      );

      replace

      The replace option allows you to replace an element with another element.

      The replace callback's first argument is domhandler's node:

      parse('
      '
      , { replace: domNode => { console.dir(domNode, { depth: null }); } });

      Console output:

      Element {
        type: 'tag',
        parent: null,
        prev: null,
        next: null,
        startIndex: null,
        endIndex: null,
        children: [],
        name: 'br',
        attribs: {}
      }

      The element is replaced if a valid React element is returned:

      text

      ', { replace: domNode => { if (domNode.attribs && domNode.attribs.id === 'replace') { return replaced; } } }); ">
      parse('

      text

      '
      , { replace: domNode => { if (domNode.attribs && domNode.attribs.id === 'replace') { return <span>replaced</span>; } } });

      replace with TypeScript

      For TypeScript projects, you may need to check that domNode is an instance of domhandler's Element:

      import { HTMLReactParserOptions } from 'html-react-parser';
      import { Element } from 'domhandler/lib/node';
      
      const options: HTMLReactParserOptions = {
        replace: domNode => {
          if (domNode instanceof Element && domNode.attribs) {
            // ...
          }
        }
      };

      If you're having issues with domNode instanceof Element, try this alternative solution.

      replace element and children

      Replace the element and its children (see demo):

      keep me and make me pretty!

      `; const options = { replace: ({ attribs, children }) => { if (!attribs) { return; } if (attribs.id === 'main') { return

      {domToReact(children, options)}

      ; } if (attribs.class === 'prettify') { return ( {domToReact(children, options)} ); } } }; parse(html, options); ">
      import parse, { domToReact } from 'html-react-parser';
      
      const html = `
        

      keep me and make me pretty!

      `; const options = { replace: ({ attribs, children }) => { if (!attribs) { return; } if (attribs.id === 'main') { return <h1 style={{ fontSize: 42 }}>{domToReact(children, options)}</h1>; } if (attribs.class === 'prettify') { return ( <span style={{ color: 'hotpink' }}> {domToReact(children, options)} </span> ); } } }; parse(html, options);

      HTML output:

      keep me and make me pretty! ">
      <h1 style="font-size:42px">
        <span style="color:hotpink">
          keep me and make me pretty!
        span>
      h1>

      replace element attributes

      Convert DOM attributes to React props with attributesToProps:

      `; const options = { replace: domNode => { if (domNode.attribs && domNode.name === 'main') { const props = attributesToProps(domNode.attribs); return
      ; } } }; parse(html, options); ">
      import parse, { attributesToProps } from 'html-react-parser';
      
      const html = `
        
              
      `; const options = { replace: domNode => { if (domNode.attribs && domNode.name === 'main') { const props = attributesToProps(domNode.attribs); return <div {...props} />; } } }; parse(html, options);

      HTML output:

      ">
      <div class="prettify" style="background:#fff;text-align:center">div>

      replace and remove element

      Exclude an element from rendering by replacing it with :

      ', { replace: ({ attribs }) => attribs && attribs.id === 'remove' && <> }); ">
      parse('


      '
      , { replace: ({ attribs }) => attribs && attribs.id === 'remove' && <></> });

      HTML output:

      <p>p>

      library

      The library option specifies the UI library. The default library is React.

      To use Preact:

      parse('
      '
      , { library: require('preact') });

      Or a custom library:

      parse('
      '
      , { library: { cloneElement: () => { /* ... */ }, createElement: () => { /* ... */ }, isValidElement: () => { /* ... */ } } });

      htmlparser2

      htmlparser2 options do not work on the client-side (browser) and only works on the server-side (Node.js). By overriding htmlparser2 options, universal rendering can break.

      Default htmlparser2 options can be overridden in >=0.12.0.

      To enable xmlMode:

      parse('

      '
      , { htmlparser2: { xmlMode: true } });

      trim

      By default, whitespace is preserved:

      parse('
      \n'
      ); // [React.createElement('br'), '\n']

      To remove whitespace, enable the trim option:

      parse('
      \n'
      , { trim: true }); // React.createElement('br')

      This fixes the warning:

      Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of 

      However, intentional whitespace may be stripped out:

      parse('

      '
      , { trim: true }); // React.createElement('p')

      Migration

      v1.0.0

      TypeScript projects will need to update the types in v1.0.0.

      For the replace option, you may need to do the following:

      ', { replace: domNode => { if (domNode instanceof Element && domNode.attribs.class === 'remove') { return <>; } } }); ">
      import { Element } from 'domhandler/lib/node';
      
      parse('
      '
      , { replace: domNode => { if (domNode instanceof Element && domNode.attribs.class === 'remove') { return <></>; } } });

      Since v1.1.1, Internet Explorer 9 (IE9) is no longer supported.

      FAQ

      Is this XSS safe?

      No, this library is not XSS (cross-site scripting) safe. See #94.

      Does invalid HTML get sanitized?

      No, this library does not sanitize HTML. See #124, #125, and #141.

      Are

      . Make sure you don't have any extra whitespace between tags on each line of your source code.
Issues
  • Fix component style attribute parser

    Fix component style attribute parser

    When we have a style attribute on the original HTML, the parsing was not correct, specially with background-image with an external URL, this was not loading because of a split by ':' what breaks the URL. I added an library that generates a more complete style tag using css-to-react-native.

    bug 
    opened by ianvieira 18
  • TS Error : instanceof Element always return false with Next.js

    TS Error : instanceof Element always return false with Next.js

    Reproducible Demo

    https://codesandbox.io/s/quizzical-lake-16q4o?file=/pages/index.tsx

    When replacing to a custom component, false will always be returned.

    I am currently using the any type. However, is there any other solution other than the any type?

    question 
    opened by purp1eeeee 17
  • Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

    Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

    Hi!

    Great plugin, really think this is going to be helpful for what I'm working on.

    I noticed that parsing any img-element causes the above error. This may also apply to any element that never should have child elements.

    A temporary workaround is to use something like this:

    const parserConfig = {
        replace: domNode => {
            if(domNode.type === DOM_TYPE_TAG && domNode.name === 'img') {
                return <img src={domNode.attribs.src} alt={domNode.attribs.alt} className={domNode.attribs.class} />;
            }
        }
    };
    
    bug 
    opened by poacher2k 14
  • SSR - crashes with

    SSR - crashes with "navigator is not defined"

    Hi,

    in compiled "html-react-parser.js" is a function (isIE) which seems to be called only by importing your lib. On server side this function crashes my build due to unchecked existence of navigator.

    "ReferenceError: navigator is not defined"

    opened by Remownz 13
  • drop dependency on react 15

    drop dependency on react 15

    There have been a few discussions about problems with bundling react 15 and react 16 side by side (#101 #105). Since react-dom-core seems to only be used for creating look-up tables for html attributes, and since react15 hasn't seen an update in two years, would it make sense to extract these lookups into html-react-parser and drop the react-dom-core dependency?

    This may require dropping support for react 15 so I understand if this is not a good direction.

    feature 
    opened by talbet 13
  • Update README with advanced usage of `replace` method

    Update README with advanced usage of `replace` method

    Add example to README.md to show use case where children needs to be kept or has its own handler in the replace method.

    documentation 
    opened by poacher2k 13
  • Don't change case of tags

    Don't change case of tags

    I noticed that the parser changes everything to lower case, which is bad for me since I have some case sensitive tags.

    Is there a way to prevent this?

    opened by rscott78 11
  • SVG paring fails with an embedded script tag

    SVG paring fails with an embedded script tag

    This is a simplified copy of my SVG. I've removed a lot of the text / use statements to keep it a reasonable length.

    <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" id="carriageLayout0065" contentScriptType="text/ecmascript" contentStyleType="text/css" width="915" height="270" zoomAndPan="magnify" preserveAspectRatio="xMidYMid meet" version="1.0"> <style><![CDATA[ text { font-family : Sans-Serif; font-size : 13px; } .outline { fill:#ECEFF1; stroke:black; } .seat { fill:#D84315; } .available { fill:#B0BEC5; } .priority.available { fill:#F8BBD0; } .companion.available { fill:#F8BBD0; } .wheelchair.available { fill:#F8BBD0; } .selected.available { fill:#8BC34A; } use.available { cursor : pointer; } text { pointer-events: none; } .table { fill:#37474F; } .luggage { fill:#BCAAA4; } #suitcase { fill : black; } .berth { stroke : black; fill : none; } .bed { stroke : black; } ]]></style> <defs> <g id="fseat"> <rect x="0" y="0" class="bg" style="stroke:none" width="35" height="37" rx="7" ry="7"/> <rect x="1" y="5" style="fill:black;stroke:black;opacity:0.35;" width="5" height="27" rx="2" ry="2"/> <rect x="8" y="1" style="fill:black;stroke:black;opacity:0.35;" width="20" height="5" rx="2" ry="2"/> <rect x="8" y="30" style="fill:black;stroke:black;opacity:0.35;" width="20" height="5" rx="2" ry="2"/> </g> <g id="bseat"> <rect x="0" y="0" class="bg" style="stroke:none" width="35" height="37" rx="7" ry="7"/> <rect x="30" y="5" style="fill:black;stroke:black;opacity:0.35;" width="5" height="27" rx="2" ry="2"/> <rect x="8" y="1" style="fill:black;stroke:black;opacity:0.35;" width="20" height="5" rx="2" ry="2"/> <rect x="8" y="30" style="fill:black;stroke:black;opacity:0.35;" width="20" height="5" rx="2" ry="2"/> </g> <g id="sfseat"> <rect x="0" y="0" class="bg" style="stroke:none" width="30" height="37" rx="7" ry="7"/> <rect x="1" y="5" style="fill:black;stroke:black;opacity:0.35;" width="5" height="27" rx="2" ry="2"/> <rect x="8" y="1" style="fill:black;stroke:black;opacity:0.35;" width="15" height="5" rx="2" ry="2"/> <rect x="8" y="30" style="fill:black;stroke:black;opacity:0.35;" width="15" height="5" rx="2" ry="2"/> </g> <g id="sbseat"> <rect x="0" y="0" class="bg" style="stroke:none" width="30" height="37" rx="7" ry="7"/> <rect x="25" y="5" style="fill:black;stroke:black;opacity:0.35;" width="5" height="27" rx="2" ry="2"/> <rect x="8" y="1" style="fill:black;stroke:black;opacity:0.35;" width="15" height="5" rx="2" ry="2"/> <rect x="8" y="30" style="fill:black;stroke:black;opacity:0.35;" width="15" height="5" rx="2" ry="2"/> </g> <g id="lfseat"> <rect x="0" y="0" class="bg" style="stroke:none" width="40" height="37" rx="7" ry="7"/> <rect x="1" y="5" style="fill:black;stroke:black;opacity:0.35;" width="5" height="27" rx="2" ry="2"/> <rect x="8" y="1" style="fill:black;stroke:black;opacity:0.35;" width="25" height="5" rx="2" ry="2"/> <rect x="8" y="30" style="fill:black;stroke:black;opacity:0.35;" width="25" height="5" rx="2" ry="2"/> </g> <g id="lbseat"> <rect x="0" y="0" class="bg" style="stroke:none" width="40" height="37" rx="7" ry="7"/> <rect x="35" y="5" style="fill:black;stroke:black;opacity:0.35;" width="5" height="27" rx="2" ry="2"/> <rect x="8" y="1" style="fill:black;stroke:black;opacity:0.35;" width="25" height="5" rx="2" ry="2"/> <rect x="8" y="30" style="fill:black;stroke:black;opacity:0.35;" width="25" height="5" rx="2" ry="2"/> </g> <g id="sberth"> <rect x="0" y="0" width="90" height="190" class="berth"/> </g> <g id="dberth"> <rect x="0" y="0" width="90" height="190" class="berth"/> </g> <g id="mbed"> <rect x="0" y="0" width="70" height="40" class="bed bg"/> </g> <g id="wchair" transform="scale(0.05)"> <rect width="570" height="720" x="20" y="0" rx="60" ry="60" stroke="none" class="bg"/> <path transform="translate(60,80)" fill="black" fill-rule="evenodd" clip-rule="evenodd" d="M161.9882813,98.1240234&#10; c24.9628906-2.3046875,44.3574219-23.8110352,44.3574219-48.9658203C206.3457031,22.0830078,184.2626953,0,157.1875,0&#10; s-49.1572266,22.0830078-49.1572266,49.1582031c0,8.2568359,2.3037109,16.7055664,6.1445313,23.8105469l17.515625,246.4667969&#10; l180.3964844,0.0488281l73.9912109,173.3652344l97.1445313-38.0976563l-15.0429688-35.8203125l-54.3662109,19.625&#10; l-71.5908203-165.2802734l-167.7294922,1.1269531l-2.3027344-31.2128906l121.4228516,0.0483398v-46.1831055l-126.0546875-0.0493164&#10; L161.9882813,98.1240234z"/> <path transform="translate(60,80)" fill="black" fill-rule="evenodd" clip-rule="evenodd" d="M343.4199219,451.5908203&#10; c-30.4472656,60.1875-94.1748047,99.8398438-162.1503906,99.8398438C81.4296875,551.4306641,0,470.0009766,0,370.1611328&#10; c0-70.1005859,42.4853516-135.2436523,105.8818359-164.1210938l4.1025391,53.5375977&#10; c-37.4970703,23.628418-60.6123047,66.262207-60.6123047,110.9506836c0,72.4267578,59.0712891,131.4970703,131.4970703,131.4970703&#10; c66.2617188,0,122.7646484-50.8515625,130.4697266-116.0869141L343.4199219,451.5908203z"/> </g> <g id="suitcase" transform="scale(0.1)"> <g transform="translate(30,-65)"> <rect x="48" y="32" width="144" height="160"/> <path style="fill:black" d="m 40,32 0,160 -16,0 a 24,24 0 0 1 -24,-24 l 0,-112 a 24,24 0 0 1 24,-24 z"/> <path d="m 200,32 16,0 a 24,24 0 0 1 24,24 l 0,112 a 24,24 0 0 1 -24,24 l -16,0 z"/> <path d="m 84,30 0,-12 a 18,18 0 0 1 18,-18 l 36,0 a 18,18 0 0 1 18,18 l 0,12 -12,0 0,-12 a 6,6 0 0 0 -6,-6 l -36,0 a 6,6 0 0 0 -6,6 l 0,12 z"/> </g> </g> </defs> <rect x="10" y="10" width="893" height="195" class="outline"/> <rect x="106" y="20" width="25" height="60" class="table"/> <rect x="106" y="20" width="25" height="60" class="table"/> <rect x="106" y="20" width="25" height="60" class="table"/> <use xmlns:xlink="http://www.w3.org/1999/xlink" id="PL-61A" x="40" y="14" xlink:type="simple" xlink:actuate="onRequest" xlink:show="replace" xlink:href="#sbseat" class="seat"/> <use xmlns:xlink="http://www.w3.org/1999/xlink" id="PL-60A" x="40" y="52" xlink:type="simple" xlink:actuate="onRequest" xlink:show="replace" xlink:href="#sbseat" class="seat"/> <use xmlns:xlink="http://www.w3.org/1999/xlink" id="PL-57A" x="73" y="14" xlink:type="simple" xlink:actuate="onRequest" xlink:show="replace" xlink:href="#sfseat" class="seat"/> <use xmlns:xlink="http://www.w3.org/1999/xlink" id="PL-55A" x="134" y="14" xlink:type="simple" xlink:actuate="onRequest" xlink:show="replace" xlink:href="#sbseat" class="seat"/> <use xmlns:xlink="http://www.w3.org/1999/xlink" id="PL-56A" x="73" y="52" xlink:type="simple" xlink:actuate="onRequest" xlink:show="replace" xlink:href="#sfseat" class="seat"/> <use xmlns:xlink="http://www.w3.org/1999/xlink" id="PL-54A" x="134" y="52" xlink:type="simple" xlink:actuate="onRequest" xlink:show="replace" xlink:href="#sbseat" class="seat"/> <use xmlns:xlink="http://www.w3.org/1999/xlink" id="PL-49A" x="196" y="14" xlink:type="simple" xlink:actuate="onRequest" xlink:show="replace" xlink:href="#sbseat" class="seat"/> <text x="44" y="37">61A</text> <text x="44" y="75">60A</text> <text x="77" y="37">57A</text> <text x="138" y="37">55A</text> <text x="77" y="75">56A</text> <text x="138" y="75">54A</text> <script><![CDATA[ var svgDoc = document.getElementById('carriageLayout0065'); var selector = '[id^=' + String.fromCharCode(039) + 'PL-' + String.fromCharCode(039) + ']'; var ids = svgDoc.querySelectorAll(selector); for (var x=0;x<ids.length;x++) { if (ids[x].classList.contains('available')) { ids[x].addEventListener('click',function(event){ if (top.toggleSeat(event)) { event.target.classList.toggle('selected'); } }) } } ]]></script> </svg>

    This results in the following error:

    SyntaxError: Unexpected end of input appendChild node_modules/react-dom/cjs/react-dom.development.js:8701 8698 | } 8699 | 8700 | function appendChild(parentInstance, child) {

    8701 | parentInstance.appendChild(child); 8702 | } 8703 | 8704 | function appendChildToContainer(container, child) { View compiled commitPlacement node_modules/react-dom/cjs/react-dom.development.js:15066 15063 | if (isContainer) { 15064 | appendChildToContainer(parent, node.stateNode); 15065 | } else { 15066 | appendChild(parent, node.stateNode); 15067 | } 15068 | } 15069 | } else if (node.tag === HostPortal) { View compiled commitAllHostEffects node_modules/react-dom/cjs/react-dom.development.js:15822 15819 | switch (primaryEffectTag) { 15820 | case Placement: 15821 | { 15822 | commitPlacement(nextEffect); 15823 | // Clear the "placement" from effect tag so that we know that this is inserted, before 15824 | // any life-cycles like componentDidMount gets called. 15825 | // TODO: findDOMNode doesn't rely on this any more but isMounted View compiled

    If I remove the script then it works as expected.

    {ParseHTML(svgString.replace(/</?script[^>]*/g,''))}

    question 
    opened by ianbale 10
  • Doesn't work with web components with custom attributes

    Doesn't work with web components with custom attributes

    If I pass in an html string with attributes this doesn't recognize, they are not included in the props.

    <my-custom-element label="mylabel" my-custom-prop="someValue"></my-custom-element>
    

    This will only include label, but not my-custom-prop.

    opened by bschlenk 10
  • TS Error: Property 'attribs' does not exist on type 'DOMNode'.

    TS Error: Property 'attribs' does not exist on type 'DOMNode'.

    Expected Behavior

    When upgrade from version 0.14.3 to 1.0, TypeScript type errors occurs.

    error TS2339: Property 'attribs' does not exist on type 'DOMNode'.
    error TS2339: Property 'name' does not exist on type 'DOMNode'.
    error TS2339: Property 'children' does not exist on type 'DOMNode'.
    ...etc
    

    Actual Behavior

    No error occurs.

    Steps to Reproduce

    Upgrade from version 0.14.3 to 1.0.

    Reproducible Demo

    0.14.3: https://codesandbox.io/s/mutable-surf-7r84v?file=/src/App.tsx 1.0: https://codesandbox.io/s/async-wildflower-p1wxl?file=/src/App.tsx

    MEMO: https://github.com/remarkablemark/html-react-parser/commit/5568ed72fb2c31c1924eac114f38d6294c3ba342#diff-7aa4473ede4abd9ec099e87fec67fd57afafaf39e05d493ab4533acc38547eb8

    question 
    opened by bicstone 9
  • Removing property value from MathML

    Removing property value from MathML

    Expected Behavior

    image

    Actual Behavior

    image

    Steps to Reproduce

    import parser from 'html-react-parser'
    
    parser('<math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mfenced open=\"{\" close=\"}\"><mfrac><mn>1</mn><mn>2</mn></mfrac></mfenced></math>')
    

    Reproducible Demo

    https://codesandbox.io/s/peaceful-buck-72od5?file=/src/App.js

    Environment

    • Version: 1.3.0
    • Platform: Windows
    • Browser: Microsoft Edge Version 94.0.992.31
    opened by rivajunior 0
  • Unable to parse css styles which contain !important

    Unable to parse css styles which contain !important

    Expected Behavior

    Styles with important should be applied to parsed HTML

    Actual Behavior

    HTML which contains style rule with !important does not get applied after parsing

    Steps to Reproduce

    Create a HTML inside a string which contains style rule with !important; const html = <h1 style="display: none !important;"> html-react-parser </h1>;

    After using: parse(html) H1 element with text html-react-parser will be displayed

    Reproducible Demo

    https://jsfiddle.net/e87hqu3s/2/

    Environment

    • Version: Latest version
    • Platform: Windows 10
    • Browser: Chrome
    opened by Marko-Matijevic 0
  • unable to rightly parse html when it contain some html tags with no ends.

    unable to rightly parse html when it contain some html tags with no ends.

    I am unable to parse the current html from some reason

    <div>
    <div id="chr-content">
    <span>
      lkjasdkjasdkljakldj
    </div>
    </div>
    `
    

    My current Code is

      const validate =()=> {
           var h = html.replace(/<!DOCTYPE html>/g, "").
              replace(/[[class]]/g, "").
              replace(/[[id]]/g, "")
        var container = parse("<div>" + h + "</div>");
           var content = container.querySelector("#chr-content");
            setFound(content != null ? "found" : "not found")
      }
    

    This is on Node.js with the latest version 4.1.4

    Here is snack example if you would like to test

    snack

    opened by AlenToma 0
  • How should/can we use css selectors to traverse the nodes?

    How should/can we use css selectors to traverse the nodes?

    Currently we want to supply a replace function that can detect a given pattern and then traverse that node's children to handle that node in two ways:

    1. Find what the value is of a specific attribs by traversing its children and use that value to define which react component should wrap the root node.
    2. Remove ALL child nodes to that node other than Text.

    Diving into the dependencies I can see both cheerio and css-select are used. Not sure if its even possible to use one of those here?

    opened by iDVB 0
  • attributesToProps converts case to lower case

    attributesToProps converts case to lower case

    It seems that the attributesToProps method is converting all keys to lowercase (see https://github.com/remarkablemark/html-react-parser/blob/master/lib/attributes-to-props.js#L37 ).

    Why is this happening? We would like to pass case-sensitive attributes to our dynamic html content and with the current implementation it doesn't work, since all attributes are converted to lower case?

    question 
    opened by h0jeZvgoxFepBQ2C 2
  • Not converting to html if the string is <h1</br>

    Not converting to html if the string is

    When the string is <h1
    and sending this to parse function not outputting the value in UI. If not then how to output the <h1
    ?

    question 
    opened by kishoreio 1
  • CommonJS import form has changed

    CommonJS import form has changed

    Expected Behavior

    Documentation states CommonJS import looks like: const parse = require('html-react-parser');

    Actual Behavior

    This results in a "parse is not a function" error.

    Using this instead works: const parse = require('html-react-parser').default;

    Reproducible Demo

    Not working: https://codesandbox.io/s/amazing-lalande-807jt Working with ".default": https://codesandbox.io/s/small-mountain-3vp8n

    Environment

    • Version: 1.2.6
    • Platform: React 17.0.2
    • Browser: Chrome
    documentation 
    opened by dineshpannu 3
Releases(v1.4.0)
A Fetch Library Support React New Suspense SSR

use-suspense-fetch A data fetching library for React Suspense. inspired by use-asset Feature use LRU Cache support create custom cache support React 1

Snake 6 Jul 12, 2021
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

Aleck Greenham 1.9k Oct 3, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021
Detect device, and render view according to detected device type.

react-device-detect Detect device, and render view according to the detected device type. Installation To install, you can use npm or yarn: npm instal

Michael Laktionov 1.6k Oct 14, 2021
A toy virtual DOM diffing and reconciliation algorithm, with a simple event loop

A toy virtual DOM diffing and reconciliation algorithm, with a simple event loop

Mauro Cano 1 Oct 9, 2021
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 18 Sep 30, 2021
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Oct 15, 2021
🤖 React Native Android widgets bridged to JS, a proof of concept

React Native Android Widget Proof Of Concept ?? Using React Native and having Android widgets is possible. Create buttons in Java / Android XML to tri

Netbeast 186 Sep 21, 2021
Article converter is an api for getting a extended html version of the content attribute provided by Article API.

Article converter is an api for getting a extended html version of the content attribute provided by Article API.

NDLA 2 Oct 6, 2021
React-Godfather aims to explore an alternative mental model for function components.

React-Godfather "Look ma, no Hooks!" React-Godfather aims to explore an alternative mental model for function components. It adds a thin layer between

John Kapolos 17 Sep 20, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 343 Oct 3, 2021
A ReactJS password recovery box component built using the FluentUI library

A ReactJS password recovery box component built using the FluentUI library

Boia Alexandru 2 Sep 20, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
repository for storing gRPC studies

Microsserviço com gRPC Este repositório armazena a estrutura inicial de um exemplo de projeto utilizando comunicação entre serviços com gRPC e Node.js

Davilson de Castro 1 Oct 14, 2021
Utility Components for determining whether elements are in the center of the screen.

@n1ru4l/react-in-center-of-screen Utility Components for determining whether elements are in the center of the screen. Codesandbox Quick Demo: https:/

Laurin Quast 12 May 29, 2021
🌊🐷 Utility for generalized composition of React components

???? Utility for generalized composition of React components

Enki 279 Oct 4, 2021
Truncate a long string in the middle, instead of the end.

React Middle Ellipsis Check out the demo. Adding ellipses to the end of long text is cool. But not always! Sometimes the end of the text contains vita

bluepeter 41 Sep 8, 2021
A React wrapper for signature pad

react-signature-pad-wrapper A React wrapper for signature pad. Installation This package is available through npm: npm install --save react-signature-

Michael Dzjaparidze 64 Oct 14, 2021
A static site generator powered by Deno + React

A static site generator powered by Deno + React

xcatliu 1.2k Oct 18, 2021