React innerText
Returns the innerText of a React JSX object, similar to the innerText property of DOM elements.
Install
npm install react-innertextoryarn 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.