Package Exports

react-innertext

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-innertext) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React innerText

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

Install

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

Test

npm run test or
yarn test

Use

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!'

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!'

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.

class MyTableHeaderCell extends React.PureComponent {
  render() {
    return (
      <th
        children={this.props.children}
        title={innerText(this.props.children)}
      />
    );
  }
}

class MyTableHeader extends React.PureComponent {
  render() {
    return (
      <thead>
        <tr>
          <MyTableHeaderCell>
            <b>Username</b>
            <SortButton />
          </MyTableHeader>
        </tr>
      </thead>
    );
  }
}