@s-ui/react-atom-input
v5.37.0
Published
> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.
Downloads
8,817
Maintainers
Keywords
Readme
AtomInput
Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.
Installation
ƛ npm install @s-ui/react-atom-input --save
Usage
Add styles
To use the component's own styles, create a .scss file and import them inside.
@import '~@s-ui/react-atom-input/lib/index';
If you want to customize your components, create your own theme and add it to your component just before.
@import 'custom-settings';
@import '~@s-ui/react-atom-input/lib/index';
You can use native types like this
import AtomInput from '@s-ui/react-atom-input'
return <AtomInput type='number' /> // possible type options: text, number, date and password
Non native Inputs
SUI-Password
In order to use SUI defined Password Input pass the prop type='sui-password'
to the Input component.
import AtomInput from '@s-ui/react-atom-input'
return <AtomInput type='sui-password' />
Mask
Wraps the https://unmanner.github.io/imaskjs/ lib, used if the input must follow a regex or a specific format/pattern . Using type='mask'
activates this input, which will be expecting the mask
prop type to be passed by.
const bankAccountMask = { // checkout all options here https://unmanner.github.io/imaskjs/guide.html
mask: 'ES00 0000 0000 00 0000000000'
}
return <AtomInput type='mask' mask={bankAccountMask} placeholder='ES00 0000 0000 00 0000000000' />
Sizes
There are defined 3 sizes (MEDIUM
, SMALL
and XSMALL
) available at the exported object inputSizes
and that can be set through the prop size
Related size Sass vars are:
$h-atom-input--m: 40px;
$h-atom-input--s: 32px;
$h-atom-input--xs: 24px;
<AtomInput
size={inputSizes.SMALL}
name="first"
placeholder="Small input"
/>
Addons
Addons are passed as prop, use leftAddon or rightAddon in order to set the position inside the Input
Addon usage
import AtomInput from '@s-ui/react-atom-input'
return <AtomInput leftAddon='http://' rightAddon='@schibsted.com' />
Icons
Icons are passed as prop, use leftIcon or rightIcon in order to set the position inside the Input
import AtomInput from '@s-ui/react-atom-input'
const logo = 'my_logo.svg'
const leftIcon = () => <img src={logo} />
<AtomInput leftIcon={leftIcon} />
You can also pass a handler for each Icon using the props onClickLeftIcon or onClickRightIcon
<AtomInput
name="second"
placeholder="Medium Input"
leftIcon={LeftIcon}
rightIcon={IconLocation}
onClickRightIcon={ e => alert("clicked right icon")}
/>
Error states
There are 3 error states:
- error state = true, will show a red border around the input field
- error state = false, will show a green border around the input field
- error state = null, will show the by default border around the input field
<AtomInput
name="second"
placeholder="Success input"
errorState={false}
/>
Input states
There are 3 error states:
- input state = 'error', will show a red border around the input field
- input state = 'success', will show a green border around the input field
- input state = 'alert', will show a orange border around the input field
- input state = null, will show the by default border around the input field
<AtomInput
name="second"
placeholder="Success input"
state="alert"
/>
Form Usage
Each field returns its value on every onChange event so you can save it inside your form state.
import React from 'react'
import ReactDOM from 'react-dom'
import Input from '@s-ui/react-atom-input'
import Button from '@s-ui/react-atom-button'
class SimpleLoginForm extends React.Component {
constructor() {
super()
this.state = {
email: {
value: '',
errorState: null
},
password: {
value: '',
errorState: null
}
}
this.onChange = this.onChange.bind(this)
this.onSubmit = this.onSubmit.bind(this)
this.onBlur = this.onBlur.bind(this)
}
isEmail(value) {
return /(.+)@(.+){2,}\.(.+){2,}/.test(value)
}
onChange({value, field}) {
this.setState(
Object.assign({}, this.state, {
[field]: {
value,
errorState: null
}
})
)
}
onBlur({value, field}) {
let errorState = !this.isEmail(value)
this.setState({
[field]: {errorState, value}
})
}
onSubmit(ev) {
ev.preventDefault()
ev.stopPropagation()
window.alert(JSON.stringify(this.state))
}
render() {
const {email, password} = this.state
return (
<form>
<Input
type="text"
value={email.value}
onChange={({ev, value}) => this.onChange({value, field: 'email', ev})}
onBlur={ev =>
this.onBlur({value: ev.target.value, field: 'email'})
}
errorState={this.state.email.errorState}
/>
<Input
type="sui-password"
value={password.value}
onChange={({ev, value}) =>
this.onChange({value, field: 'password', ev})
}
/>
<Button onClick={this.onSubmit}>Login</Button>
</form>
)
}
}