Add "%" suffix to value displayed inside react-toolbox input number

Question

I have a react-toolbox input component with type "number" as following:

<Input
    type="number"
    step="0.01"
    value={itemValue}
    onChange={this.handleInputChange.bind(this, item)}
/>

It displays 2.68

So, is it possible to display it as 2.68% inside the input field

Also, the "%" suffix should be kept displayed whenever the value changes.

Answer 1

React-toolbox's <Input /> is a div with a plain <input> tag as a child - you could always just use some CSS to get what you want, add the appropriate className to your usage of the component.

.rt-input-input {
  position: relative;
  display: inline-block;
}

.rt-input-input::after {
  content: '%';
  font-family: sans-serif;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  right: 5px;
  
  transform: translateY(-50%);
}

<div class="rt-input-input">
  <input type="text" value="2.68" />
</div>

Note this won't work on regular input tags, as they have no before/after pseudo-elements