React-international-number-input NPM

React International Number Input

A React component for international number input with locale-specific formatting and optional prefix and suffix support.

Features

Locale-aware number formatting (e.g., 27678678.45 to 27678678,45 for German locale)
Optional prefix (e.g., currency symbols)
Optional suffix (e.g., percentage symbols)
Handles user input and paste events with proper validation

Installation

You can install the package using npm:

npm install react-international-number-input
or
yarn add react-international-number-input

Props

Prop	Type	descriptin
value	number	The numeric value of the input.
placeholder	string	Placeholder text for the input field.
className	string	CSS class for the input field.
style	React.CSSProperties	Inline styles for the input field.
handleChange	(value: number) => void	Function to handle changes in the input value.
changeFromParent	boolean	If true, updates from the parent component will change the input value.
disabled	boolean	If true, disables the input field.
prefix	string	Prefix to display before the number (e.g., currency symbols).
suffix	string	Suffix to display after the number (e.g., percentage symbols).

Usage/Examples

import React, { useState } from 'react';
import InternationalNumberInput from 'react-international-number-input';

const App = () => {
  const [value, setValue] = useState<number>(0);

  return (
    <div>
      <h1>International Number Input</h1>
      <InternationalNumberInput
        value={value}
        handleChange={(newValue) => setValue(newValue || 0)}
        placeholder="Enter amount"
        className="number-input"
        style={{ width: '200px', padding: '5px' }}
        disabled={false}
        prefix="$"
        suffix="%"
      />
    </div>
  );
};

export default App;

🚀 About Me

I love turning ideas into pixels! I'm a MERN stack developer with a passion for building intuitive and impactful web experiences. I thrive in collaborative environments where I can learn from seasoned professionals and contribute my fresh perspective. I'm Passionate about leveraging cutting-edge technologies to deliver scalable and efficient solutions. I'm eager to find a role where I can make a real difference and keep my code as clean as my coffee.

🌐 https://myportfolio2868.netlify.app/

🚀 MERN Stack Development

🌐 Full-Stack Web Development

💡 Frontend: React.js, HTML5, CSS3, JavaScript

🔧 Backend: Node.js, Express.js

🛠️ Database: MongoDB

🔐 RESTful API Design and Integration

🔄 Version Control: Git, GitHub