0.0.13 • Published 6 months ago
@sajermann/react-input v0.0.13
@sajermann/react-input
Library created for implements super power in input.
Install
npm i @sajermann/react-input
Links
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>
}
/>