@zoop.studio/react-native-numberpad NPM

react-native-numberpad

Have you been struggling to implement a number-pad for use in React-native, or just want to use the logic without the UI? If so, install it now! 👊

It's lightweight at just under 2 KB and will save you some precious time.

You don't need any additional dependency libraries, just the ones installed in your project.

Install

yarn add @zoop.studio/react-native-numberpad

Usage

1. Wrap `NumberpadProvider`

Wrap it in NumberpadProvider wherever you need it, and as many times as you want.

import { NumberPadProvider } from '@zoop.studio/react-native-numberpad';

const Example = () => {
    return (
        <NumberPadProvider maxLength={10}>
            {...}
        </NumberPadProvider>
    ) 
}

2. Use hooks

import {
    NumberPadProvider,
+    useNumberPadAction,
+    useNumberPadValue
} from '@zoop.studio/react-native-numberpad';

const Example = () => {
+    const {onAppend, onDelete, onClear} = useNumberPadAction();
+    const value = useNumberPadValue();
    return (
        <NumberPadProvider maxLength={10}>
            {...}
        </NumberPadProvider>
    ) 
}

Contribute

This library is used in real-world products, and your contributions can help us make great updates to products uploaded to the App Store and Play Store.

Download Apple App Store or Google Play Store, a budgeting app for international travelers, today.