Returns the innerText of a React JSX object, similar to the innerText property of DOM elements.
npm install react-innertext --save
oryarn add react-innertext
npm run test
oryarn test
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!'
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!'
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>
);
}
}