https://github.com/CharlesStover/react-innertext

Returns the innerText of a React JSX object.
https://github.com/CharlesStover/react-innertext

babel babeljs chai es6 innerhtml innertext javascript js mocha npm npm-module npm-package react reactjs travis travis-ci travisci webpack

Last synced: 3 months ago
JSON representation

Returns the innerText of a React JSX object.

• Host: GitHub
• URL: https://github.com/CharlesStover/react-innertext
• Owner: quisido
• License: mit
• Created: 2017-12-22T20:19:00.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-02-11T00:44:03.000Z (over 2 years ago)
• Last Synced: 2024-05-23T07:06:48.801Z (6 months ago)
• Topics: babel, babeljs, chai, es6, innerhtml, innertext, javascript, js, mocha, npm, npm-module, npm-package, react, reactjs, travis, travis-ci, travisci, webpack
• Language: TypeScript
• Size: 199 KB
• Stars: 50
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-innertext

README

        
# React innerText

[![version](https://img.shields.io/npm/v/react-innertext.svg)](https://www.npmjs.com/package/react-innertext)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/react-innertext.svg)](https://www.npmjs.com/package/react-innertext)

[![downloads](https://img.shields.io/npm/dt/react-innertext.svg)](https://www.npmjs.com/package/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)

```JS

import innerText from 'react-innertext';

innerText(

  


    Hello world!

    I am  years old!

  

) // 'Hello world! I am 3 years old!'

```


### Server-Side Rendering (CommonJS)

```JS

const innerText = require('react-innertext');

innerText(

  


    Hello world!

    I am  years old!

  

) // 'Hello world! I am 3 years old!'

```


### Real World Example

In the below example, the `title` attribute of the `` 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`.

```JS

function MyTableHeader() {

  return (

    

      

        

          Username

          

        

      

    

  );

}

// title="Username"

function MyTableHeaderCell({ children }) {

  return (

    

  );

}

```

## Sponsor 💗

If you are a fan of this project, you may

[become a sponsor](https://github.com/sponsors/CharlesStover)

via GitHub's Sponsors Program.