PlaceholderShim provides Input and Textarea, small wrappers around React.createElement('input') and React.createElement('textarea') respectively that shims in placeholder functionality for browsers that don't natively support it. Currently only tested with IE9.

Demo: https://jsfiddle.net/69z2wepo/16498/

Install: npm install react-input-placeholder

Require:

Input = require('react-input-placeholder')(React).Input;
Textarea = require('react-input-placeholder')(React).Textarea;

The compiled bundle sits in the dist/ folder.

<script src='dist/react-input-placeholder.min.js'></script>
<script>
  var Input = PlaceholderShim.Input;
  var Textarea = PlaceholderShim.Textarea;
</script>

You can use Input or Textarea exactly the same way you'd use React.createElement('input') or <input /> in JSX. All attributes will be passed on, and all event callbacks will be called. However, please note that the placeholder shim only works on controlled inputs (i.e., you must provide a value or valueLink prop).

When the placeholder text is visible, the placeholder CSS class will be added to the input element so you can style it, e.g.

input.placeholder,
textarea.placeholder {
  color: gray;
  font-style: italic;
}

Placeholder doesn't show on IE9.

<input placeholder="Enter text here..." value={this.state.value} onChange={this.handleChange} />

Works on IE9!

<Input placeholder="Enter text here..." value={this.state.value} onChange={this.handleChange} />

npm install
grunt dist

MIT