Mohammad Asif cf937194cb Removed un-waned things 1. 5 달 전
..
LICENSE cf937194cb Removed un-waned things 1. 5 달 전
README.md cf937194cb Removed un-waned things 1. 5 달 전
index.d.ts cf937194cb Removed un-waned things 1. 5 달 전
index.js cf937194cb Removed un-waned things 1. 5 달 전
package.json cf937194cb Removed un-waned things 1. 5 달 전

README.md

React innerText Tweet version minzipped size downloads build

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