All Projects → CharlesStover → react-innertext

CharlesStover / react-innertext

Licence: MIT License
Returns the innerText of a React JSX object.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to react-innertext

react-multi-context
Manage multiple React 16 contexts with a single component.
Stars: ✭ 19 (-48.65%)
Mutual labels:  babel, mocha, travis-ci, npm-package, travis, npm-module, babeljs, travisci
fetch-action-creator
Fetches using standardized, four-part asynchronous actions for redux-thunk.
Stars: ✭ 28 (-24.32%)
Mutual labels:  mocha, travis-ci, chai, travis, npm-module, travisci
Reactn
React, but with built-in global state management.
Stars: ✭ 1,906 (+5051.35%)
Mutual labels:  babel, travis-ci, travis, babeljs, travisci
js-stack-from-scratch
🌺 Russian translation of "JavaScript Stack from Scratch" from the React-Theming developers https://github.com/sm-react/react-theming
Stars: ✭ 394 (+964.86%)
Mutual labels:  mocha, npm-package, chai, npm-module
react-testing-mocha-chai-enzyme
A solid test setup for React components with Mocha, Chai, Sinon, Enzyme in a Webpack/Babel application.
Stars: ✭ 48 (+29.73%)
Mutual labels:  mocha, travis-ci, chai, travis
react-native-web-view
An implementation of React Native's WebView that allows for postMessage on iOS devices.
Stars: ✭ 13 (-64.86%)
Mutual labels:  travis-ci, babeljs, travisci
alexa-skill-boilerplate
An easy to use Amazon Alexa Skill Boilerplate for fast skill creation
Stars: ✭ 54 (+45.95%)
Mutual labels:  mocha, travis-ci, chai
babel-plugin-source-map-support
A Babel plugin which automatically makes stack traces source-map aware
Stars: ✭ 41 (+10.81%)
Mutual labels:  babel, npm-package, npm-module
Forge Node App
🛠📦🎉 Generate Node.js boilerplate with optional libraries & tools
Stars: ✭ 90 (+143.24%)
Mutual labels:  babel, npm-package, npm-module
patent-free-react-ecosystem-migration-plan
Patent Free React Ecosystem Migration Plan
Stars: ✭ 15 (-59.46%)
Mutual labels:  mocha, chai
earl
☕ Ergonomic, modern and type-safe assertion library for TypeScript
Stars: ✭ 217 (+486.49%)
Mutual labels:  mocha, chai
yaspeller-ci
Fast spelling check for Travis CI
Stars: ✭ 60 (+62.16%)
Mutual labels:  travis-ci, travis
rest.api.test
Simple REST API Test Framework
Stars: ✭ 47 (+27.03%)
Mutual labels:  mocha, chai
qa-automation-base
There are basic projects for automation frameworks based on Kotlin/Java and TypeScript for the backend, frontend, and mobile.
Stars: ✭ 45 (+21.62%)
Mutual labels:  mocha, chai
docker-google-lighthouse-puppeteer
Google Lighthouse + Puppeteer / Docker Image
Stars: ✭ 29 (-21.62%)
Mutual labels:  npm-package, npm-module
googletest-ci
Continuous integration (CI) + Google Test (gtest) + CMake example boilerplate demo
Stars: ✭ 14 (-62.16%)
Mutual labels:  travis-ci, travis
react-native-input-prompt
A cross-platform user input prompt component for React Native with Native UI.
Stars: ✭ 45 (+21.62%)
Mutual labels:  npm-package, npm-module
cucumber-steps
🥒 Quick start for testing with Cucumber.js
Stars: ✭ 15 (-59.46%)
Mutual labels:  mocha, chai
graphql-starter
Node, Express, GraphQL, Neo4j, Mocha and ES6
Stars: ✭ 17 (-54.05%)
Mutual labels:  mocha, chai
spectron-typescript-starter
Spectron TypeScript Starter for e2e testing electron applications
Stars: ✭ 15 (-59.46%)
Mutual labels:  mocha, chai

React innerText

version minzipped size downloads

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 />
        </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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].