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 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 />
        </MyTableHeader>
      </tr>
    </thead>
  );
}

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