react-numeric-input
Version:
Number input component that can replace the native number input which is not yet very well supported and where it is, it does not have the same appearance across the browsers. Additionally this component offers more flexible options and can be used for an
360 lines (349 loc) • 15.8 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>React number input examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
<style media="screen">
.code {
background : transparent;
font-family: Menlo, monospace;
font-size : 1.4rem ;
white-space: pre-wrap;
}
fieldset {
margin: 30px 0 60px;
}
blockquote:after {
content: "";
clear:both;
display: block;
height: 0;
}
.demo .table > tbody > tr > th,
.demo .table > tbody > tr > td {
vertical-align: middle;
}
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script src="react-numeric-input.js"></script>
</head>
<body>
<div class="container">
<fieldset>
<legend class="text-success">Minimal Usage</legend>
<p>
This will behave exactly like <code><input type="number"></code>.
It will create an empty numeric input that starts changing from zero.
The difference is that this works on any browser and does have the same
appearance everywhere.
</p>
<blockquote>
<div class="code jsx"><NumericInput/></div>
<script class="jsx" type="text/plain">{}</script>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">With className</legend>
<p>
You can use <code>className</code> for adding CSS classes.
This component was designed play well with Bootstrap and
here is an example with <code>.form-control</code> class.
</p>
<blockquote>
<div class="code jsx"><NumericInput className="form-control"/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{"className": "form-control"}</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">With inline styles disabled</legend>
<p>
You can use <code>style={ false }</code> to disable the
inline styles. It's up to you to provide your own CSS in this case.
</p>
<blockquote>
<div class="code jsx"><NumericInput className="form-control" style={ false }/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{"className": "form-control", "style": false }</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Typical Usage</legend>
<p>
Most of the time you will need to specify <code>min</code>,
<code>max</code> and <code>value</code>:
</p>
<blockquote>
<div class="code jsx"><NumericInput min={0} max={100} value={50}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{"className": "form-control","min":0,"max":100,"value":50}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Working with floats</legend>
<p>
You can use to use <code>step</code> and <code>precision</code>
props to make your input working with floating point numbers:
</p>
<blockquote>
<div class="code jsx"><NumericInput step={0.1} precision={2} value={50.3}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{"className":"form-control","step":0.1,"precision":2,"value":50.3}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Custom format</legend>
<p>
By default the component displays the value number as is. However,
you can provide your own <code>format</code> funtion that will be
called with the numeric value and is expected to return the string
that will be rendered in the input:
</p>
<blockquote>
<div class="code js">function myFormat(num) {
return num + '$';
}</div>
<div class="code jsx"><NumericInput precision={2} value={50.3} step={0.1} format={myFormat}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
className: "form-control",
precision: 2,
value: 50.3,
step: 0.1,
format: function(num) {
return num + '$';
}
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Disabled & Read only</legend>
<blockquote>
<div class="code jsx"><NumericInput disabled value={23.45}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
value: 23.45,
disabled: true,
className : 'form-control'
}
</script>
</div>
</blockquote>
<blockquote>
<div class="code jsx"><NumericInput readOnly value={23.45}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
value: 23.45,
readOnly: true,
className : 'form-control'
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Custom style</legend>
<blockquote>
<div class="code xml"><NumericInput
value={-23.45}
precision={2}
size={6}
step={0.01}
mobile={false}
style={{
wrap: {
background: '#E2E2E2',
boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000',
padding: '2px 2.26ex 2px 2px',
borderRadius: '6px 3px 3px 6px',
fontSize: 32
},
input: {
borderRadius: '4px 2px 2px 4px',
color: '#988869',
padding: '0.1ex 1ex',
border: '1px solid #ccc',
marginRight: 4,
display: 'block',
fontWeight: 100,
textShadow: 1px 1px 1px rgba(0, 0, 0, 0.1)
},
'input:focus' : {
border: '1px inset #69C',
outline: 'none'
},
arrowUp: {
borderBottomColor: 'rgba(66, 54, 0, 0.63)'
},
arrowDown: {
borderTopColor: 'rgba(66, 54, 0, 0.63)'
}
}}/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
value: -23.45,
precision : 2,
size: 6,
step: 0.01,
mobile: false,
style : {
wrap: {
background: '#E2E2E2',
boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000',
padding: '2px 2.26ex 2px 2px',
borderRadius: '6px 3px 3px 6px',
fontSize: 32
},
input: {
borderRadius: '4px 2px 2px 4px',
color : '#988869',
padding : '0.1ex 1ex',
border : '1px solid #ccc',
marginRight : 4,
display : 'block',
fontWeight : 100,
textShadow : '1px 1px 1px rgba(0, 0, 0, 0.1)'
},
'input:focus' : {
border: '1px inset #69C',
outline: 'none'
},
arrowUp: {
borderBottomColor: 'rgba(66, 54, 0, 0.63)'
},
arrowDown: {
borderTopColor: 'rgba(66, 54, 0, 0.63)'
}
}
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Other HTML props</legend>
<p>
You can use any additional HTML attributes that make
sence, just don't forget to camelCase them as JSX
requires. Only the <code>type</code> attribute will
be overriden to <code>text</code>. Here is an example:
</p>
<blockquote>
<div class="code xml"><NumericInput
name="my_number"
readOnly
disabled={false}
autoComplete="on"
autoCorrect="on"
autoFocus={false}
form="some-form"
placeholder="Enter a number"
required
size="14"
spellcheck="false"
tabindex="5"/></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
name : "my_number",
readOnly : true,
disabled : false,
autoComplete: "on",
autoCorrect : "on",
autoFocus : false,
form : "some-form",
placeholder : "Enter a number",
required : true,
size : "14",
spellCheck : "false",
tabIndex : "5"
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Mobile Version</legend>
<p>
The widget can be switched to mobile appearance using the
<code>mobile</code> prop. It can be <code>true</code>,
<code>false</code> or <code>"auto"</code>. The default value
is <code>auto</code> which evaluates to the result of
<code>('ontouchstart' in document)</code>. You can use true
or false to force it staing into one mode or to trovide your
custom detection logic like <code>mobile={ myTestFuncton() }</code>
but keep in mind that this will only be used once when the
component is created.
</p>
<blockquote>
<div class="code xml"><NumericInput mobile /></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{ mobile: true }</script>
</div>
<br/>
<br/>
<div class="code xml"><NumericInput mobile className="form-control" /></div>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">{ mobile: true, className: "form-control" }</script>
</div>
<br/>
<br/>
<div class="col-xs-12">
<label onmousedown="return false">
<input type="checkbox" id="example-mobile" onchange="$('#example-mobile-dynamic').closest('div').data('widget').setState({})"/>
Interactive example (click to toggle)
</label>
</div>
<br/>
<div class="col-sm-5 col-md-4 col-lg-3">
<script class="jsx" type="text/plain">
{
mobile: function() {
return $('#example-mobile').prop('checked')
},
className: "form-control",
id: "example-mobile-dynamic"
}
</script>
</div>
</blockquote>
</fieldset>
<fieldset>
<legend class="text-success">Interactive Demo</legend>
<div class="row">
<div class="col-xs-12 demo"></div>
</div>
</fieldset>
<br/>
<br/>
</div>
<script src="./examples.js"></script>
</body>
</html>