69

GitHub - istarkov/rifm: React Input Format & Mask, tiny (≈650b) component to...

 5 years ago
source link: https://github.com/istarkov/rifm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

RIFM - React Input Format & Mask

Is a tiny (≈ 650-750b) component to transform any input component into formatted or masked input.

Demo

Highlights

  • Dependency free
  • Tiny (≈ 650b)
  • Supports any input.
  • Can mask input and format

Example

import { Rifm } from 'rifm';
import { Value } from 'react-powerplug';
import TextField from '@material-ui/core/TextField';
import { css } from 'emotion';

const numberFormat = (str: string) => {
  const r = parseInt(str.replace(/[^\d]+/gi, ''), 10);
  return r ? r.toLocaleString('en') : '';
}

...

  <Value initial={''}>
    {text => (
      <Rifm
        value={text.value}
        onChange={text.set}
        format={numberFormat}
      >
        {({ value, onChange }) => (
          <TextField
            value={value}
            label={'Float'}
            onChange={onChange}
            className={css({input: {textAlign:"right"}})}
            type="tel"
          />
        )}
      </Rifm>
    )}
  </Value>

...

Demo

Demo source

Install

  yarn add rifm
  npm -i rifm

Thanks

@TrySound for incredible help and support on this


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK