Registry / productivity / react-onchange-date-formatter

react-onchange-date-formatter

library1.0.11jsnpmunverified

A lightweight React hook that automatically formats date input as the user types. Current version 1.0.11 (last updated 2023). It provides a custom hook useFormatDate that takes the onChange event, a state setter, and a special character separator. The hook formats the input into MM/DD/YYYY or other patterns. Minimal dependencies: only React. Differentiator: simpler than date-fns or moment for inline input masking.

productivity

npm install react-onchange-date-formatter

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-ONCHANGE-DAT

react-onchange-date-formatter

productivityjavascriptv1.0.11

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useFormatDate

✓ import useFormatDate from 'react-onchange-date-formatter'

✗ import { useFormatDate } from 'react-onchange-date-formatter'

Default export only; named import will fail.

Basic usage of useFormatDate hook to format date input on change.

import React, { useState } from 'react'; import useFormatDate from 'react-onchange-date-formatter'; export default function App() { const [date, setDate] = useState(''); const formatDate = useFormatDate(); const specialCharacter = '/'; const handleDateChange = (e) => { formatDate(e, setDate, specialCharacter); }; return ( <div> <input type="text" placeholder="10/10/2023" value={date} onChange={handleDateChange} /> </div> ); }

Debug

Known issues

gotchauseFormatDate is a custom hook, not a regular function; must be called inside a React component or custom hook.

fix

Ensure useFormatDate() is called at the top level of a functional component.

affects: all

gotchaDefault export is the hook, but the package also exports nothing else; common mistake is to destructure import.

fix

Use default import: import useFormatDate from 'react-onchange-date-formatter'

affects: all

breakingThe specialCharacter argument must be a string of exactly one character; passing multiple characters will break formatting.

fix

Pass a single character like '/' or '-'.

affects: all

Errors

Common errors & fixes

TypeError: (0 , _reactOnchangeDateFormatter.default) is not a function

Using named import { useFormatDate } instead of default import.

fix

Change to: import useFormatDate from 'react-onchange-date-formatter'

Invalid hook call. Hooks can only be called inside of the body of a function component.

Calling useFormatDate() outside a React component or inside a class component.

fix

Only call useFormatDate() inside a functional component or custom hook.

Expected specialCharacter to be a single character

Passing a string with length !== 1 as specialCharacter.

fix

Ensure specialCharacter is a single character, e.g., '/', '-', '.'

Upgrade

Version history

1.0.11latest on npm

Audit

Dependencies

reactrequiredProvides React hooks and JSX support.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Cphasanulbanna/react-date-formator ↗

packagereact-onchange-date-formatter ↗

homepagehttps://github.com/Cphasanulbanna/react-date-formator#readme ↗