Package Exports

rifm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rifm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RIFM - React Input Format & Mask

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

Demo

Highlights

Requires React 16.4+
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