npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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

9,722

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

What are 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>
    )
  }
}