Awesome Open Source
Awesome Open Source

React innerText

version minzipped size downloads

Returns the innerText of a React JSX object, similar to the innerText property of DOM elements.

Install

  • npm install react-innertext or
  • yarn add react-innertext

Use

Client-Side Rendering (ES6)

import innerText from 'react-innertext';
innerText(
  <div>
    Hello <strong>world</strong>!
    I am <span children={3} /> years old!
  </div>
) // 'Hello world! I am 3 years old!'

Server-Side Rendering (CommonJS)

const innerText = require('react-innertext');
innerText(
  <div>
    Hello <strong>world</strong>!
    I am <span children={3} /> years old!
  </div>
) // 'Hello world! I am 3 years old!'

Real World Example

In the below example, the title attribute of the <th> element sanitizes the children prop. This allows the children to contain HTML or other React Elements, while providing a safe, plain text string for the title.

function MyTableHeader() {
  return (
    <thead>
      <tr>
        <MyTableHeaderCell>
          <b>Username</b>
          <SortButton />
        </MyTableHeaderCell>
      </tr>
    </thead>
  );
}

// title="Username"
function MyTableHeaderCell({ children }) {
  return (
    <th
      children={children}
      title={innerText(children)}
    />
  );
}

Sponsor 💗

If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,539,019
Typescript (265,345
Reactjs (76,066
Js (9,767
Webpack (9,761
Npm (5,844
Es6 (5,350
Babel (3,263
Npm Package (2,826
Travis Ci (1,666
Mocha (1,145
Chai (598
Npm Module (582
Travis (482
Babeljs (78
Inner Text (4
Innerhtml (4
Related Projects