lesca-use-regex v1.0.2

Installation

npm install lesca-use-regex --save

Usage

文字正則

import { useEffect, useRef } from 'react';
import useRegex from 'lesca-use-regex';

const placeholder = '注音輸入中文';

// type = text
const type = 'text';
// tw = 支援注音輸入(預設), en => 是否支援要英文, number => 是否支援數字
const options = { tw: true, en: false, number: false };

const myComponent = () => {
	const ref = useRef();

	const [value, onChange] = useRegex({ type, options });

	// 正則結果不同才會更新
	useEffect(() => {
		ref.current.value = value[0];
	}, [value]);

	return <input {...{ type, placeholder, onChange, ref }} />;
};
export default myComponent;

電話號碼正則

import { useEffect, useRef } from 'react';
import useRegex from 'lesca-use-regex';

const placeholder = '09xxxxxxxxx';

// type = tel
const type = 'tel';

const myComponent = () => {
	const ref = useRef();
	const [value, onChange] = useRegex({ type });

	// 正則結果不同才會更新
	useEffect(() => {
		const [result, , isPass] = value;
		ref.current.value = result;

		// 如果無誤
		if (isPass) ref.current.classList.add('checked');
		else ref.current.classList.remove('checked');
	}, [value]);

	return <input {...{ type, placeholder, onChange, ref }} />;
};
export default myComponent;

Email 格式正則

import { useEffect, useRef } from 'react';
import useRegex from 'lesca-use-regex';

const placeholder = 'you@host.com';

// type = tel
const type = 'email';

const myComponent = () => {
	const ref = useRef();
	const [value, onChange] = useRegex({ type });

	// 正則結果不同才會更新
	useEffect(() => {
		const [result, , isPass] = value;
		ref.current.value = result;

		// 如果無誤
		if (isPass) ref.current.classList.add('checked');
		else ref.current.classList.remove('checked');
	}, [value]);

	return <input {...{ type, placeholder, onChange, ref }} />;
};
export default myComponent;

Methods

type

options

defaultValue