Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@s-ui/react-atom-input
Advanced tools
> 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.
Readme
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.
ƛ npm install @s-ui/react-atom-input --save
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';
import AtomInput from '@s-ui/react-atom-input'
return <AtomInput type='number' /> // possible type options: text, number, date and 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' />
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' />
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 are passed as prop, use leftAddon or rightAddon in order to set the position inside the Input
import AtomInput from '@s-ui/react-atom-input'
return <AtomInput leftAddon='http://' rightAddon='@schibsted.com' />
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")}
/>
There are 3 error states:
<AtomInput
name="second"
placeholder="Success input"
errorState={false}
/>
There are 3 error states:
<AtomInput
name="second"
placeholder="Success input"
state="alert"
/>
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>
)
}
}
FAQs
> 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.
The npm package @s-ui/react-atom-input receives a total of 2,133 weekly downloads. As such, @s-ui/react-atom-input popularity was classified as popular.
We found that @s-ui/react-atom-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 68 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.