Highlight values in your app when they're changed to emphasize them.

Usage no npm install needed!

<script type="module">
  import reactHighlightable from '';



Dependency Status peerDependency Status devDependency Status Build Status

Highlight values in your app when they're changed to emphasize them.



If you want to test this locally, then: git clone and open /examples/index.html


npm install react-highlightable --save


var React = require('react');
var Highlightable = require('react-highlightable');

var App = React.createClass({
  render: function() {
      return (
              <h1>Your App</h1>
              <Timer />

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  componentWillUnmount: function() {
  render: function() {
    return <div>Seconds Elapsed: <Highlightable>{this.state.secondsElapsed}</Highlightable></div>;

React.render(<App />, document.getElementById('mount-node'));

Documentation - props

children : string or number (required)

It expects text not an element (<Highlightable>...</Highlightable>) that will be highlighted.

highlightOnMount : bool (optional)

If true, on mount it'll highlight the value on mount.

default: false

background : string (optional)

This will determine the background of the highlight.

default: #ae2240

padding: number (optional)

The padding used for the highlighted item.

default: 2

color: string (optional)

The font color used when the item is highlighted.

default: #f2f2f2

borderRadius: number (optional)

The border radius used when the item is highlighted.

default: 2

transition: string (optional)

The transition used when the item is highlighted.

default: all .3s ease

highlightDelay: number (optional)

The delay in milliseconds when the highlighted item returns to a normal state.


Please, create issues and pull requests.

git clone
cd react-portal
npm install
npm install react
  • Copy&paste the address from terminal to your browser. (something like http://localhost:8080)
  • Don't commit the main build portal.js (aka don't run npm run build)
  • Run gulp eslint before every commit to preserve the coding style. Do you know there is a nice real-time checking integration for your editor? ;-)


This package is maintained by Mitchell van Wijngaarden.


This package is licensed under the MIT license.