@sajermann/react-input

Library created for implements super power in input.

Install

npm i @sajermann/react-input

Links

NPM Github

Import

import { Input, ISajermannReactInput } from '@sajermann/ui-react';

Props

label?: string; Note: Override in label attribute input;

labelProps?: React.DetailedHTMLProps<LabelHTMLAttributes, HTMLLabelElement>;

containerProps?: React.DetailedHTMLProps<React.HTMLAttributes, HTMLDivElement>;

onChange?: (e: React.ChangeEvent) => void;

onBeforeChange?: {     removeNumber?: boolean;     removeLetterUpper?: boolean;     removeLetterLow?: boolean;     removeSpecialCharacter?: boolean;     regexForReplace?: RegExp;     fn?: (e: React.ChangeEvent) => React.ChangeEvent; };

applyMask?: TCurrency | TCnpj | TCpf | TCep;

debounce?: number;

Examples

label

<Input
	placeholder="Simple Label"
	id="Simple Label"
	label="Simple Label"
/>

labelProps

<Input
	placeholder="Label Props"
	labelProps={{
		children: 'Test',
		style: { color: 'red' },
	}}
	id="Label Props"
/>

containerProps

<Input
	placeholder="Container Props"
	id="Container Props"
	label="Container Props"
	containerProps={{
		style: {
			display: 'flex',
			flexDirection: 'column',
			border: '1px solid',
			width: 300,
		},
	}}
/>

onChange

<Input
	placeholder="On Change"
	onChange={e => console.log(e.target.value)}
/>

onBeforeChange.removeNumber

<Input
	placeholder="Remove Number"
	onBeforeChange={{ removeNumber: true }}
/>

onBeforeChange.removeUpperCase

<Input
	placeholder="Remove Upper Case"
	onBeforeChange={{ removeUpperCase: true }}
/>

onBeforeChange.removeLowerCase

<Input
	placeholder="Remove Lower Case"
	onBeforeChange={{ removeLowerCase: true }}
/>

onBeforeChange.removeSpecialCharacter

<Input
	placeholder="Remove Special Character"
	onBeforeChange={{ removeSpecialCharacter: true }}
/>

onBeforeChange.regexForReplace

<Input
	placeholder="Remove numbers from 1 to 5"
	onBeforeChange={{ regexForReplace: /[1-5]/g }}
/>

onBeforeChange.fn

<Input
	placeholder="Function Before Change"
	onChange={e => console.log(e.target.value)}
	onBeforeChange={{
		fn: e => {
			const temp = { ...e };
			temp.target.value = addMessage(temp.target.value); // Any Custom Function
			return temp;
		},
	}}
/>

applyMask.currency

<Input
	placeholder="Apply Mask - Currency"
	onBeforeChange={{
		applyMask: {
			currency: {
				decimalPlace: 2,
			},
		},
	}}
/>

applyMask.cnpj

<Input
	placeholder="Apply Mask - Cnpj"
	onBeforeChange={{
		applyMask: {
			cnpj: true,
		},
	}}
/>

applyMask.cpf

<Input
	placeholder="Apply Mask - Cpf"
	onBeforeChange={{
		applyMask: {
			cpf: true,
		},
	}}
/>

applyMask.cep

<Input
	placeholder="Apply Mask - Cep"
	onBeforeChange={{
		applyMask: {
			cep: true,
		},
	}}
/>

debounce

<Input
	placeholder="Debounce 2 seconds"
	onChange={e => console.log(e.target.value)}
	debounce={2000}
/>

controlled

<Input
	placeholder="Controlled"
	onChange={e => setControlledValue(e.target.value)}
	value={controlledValue}
/>
Controlled Value: {controlledValue}

ref

const ref = useRef<HTMLInputElement>(null);
<Input ref={ref} placeholder="Ref - Focus" />
<button
	type="button"
	style={{ width: 173 }}
	onClick={() => ref.current?.focus()}
>
	Focus
</button>

errors / errorContainerProps

<Input
	placeholder="Errors"
	containerProps={{
		style: {
			display: 'flex',
			flexDirection: 'column',
			width: 173,
		},
	}}
	errorContainerProps={{
		style: {
			display: 'flex',
			flexDirection: 'column',
			color: 'red',
			fontSize: 14,
		},
	}}
	errors={['Required', 'Invalid email adress']}
/>

renderTop

<Input 
	placeholder="Render Top" 
	renderTop={<div>Element In Top</div>} 
/>

renderBottom / Custom Error Indicator

<Input 
	placeholder="Custom Error" 
	renderBottom={
	<div
		style={{
			position: 'absolute',
			top: 2,
			right: 10,
			color: 'black',
			cursor: 'pointer',
		}}
		title="Invalid email adress"
	>
		i
	</div>
	}
/>