Tiny React text input component for the modern web. Use HTML to decorate
<input /> value for your goals.
👇 Source of the preview 👆
function AnimatedInput({ value, ...props }) {
const render = nextValue => Array.from(nextValue)
.map((char, i) => (
<span key={i} className={`animation-${getCharType(char)}`}>
{char}
</span>
));
return (
<MightyInput value={value} render={render} {...props}/>
);
}
function getCharType(char, index) {
switch (char) {
case "😀": // Smiley face emoji
return "smiley";
case "💗": // Heart emoji
return "heart";
default:
return "char";
}
}CSS could be found in examples folder.
npm i mighty-inputUse render property to specify custom render method and receive changed via onUpdate property callback.
<MightyInput
render={(value) => (
<span style={{borderBottom: '2px solid green'}}>
{value}
</span>
)}}
onUpdate={(value) => {
// Value changed
}}
/>Use filter prop to specify input filter function.
Filtrate any non-digit values:
<MightyInput
filter={(next, prev) => {
if (/^\d$/.test(next)) {
return next;
}
else {
return prev;
}
}}
/>(next:string, previous:string) -> string|React.Element
Render property is a function to transform value to HTML or another string. This function receives next and previous values of input field.
<MightyInput render={
(next) => <span style={{color: 'red'}}>{next}</span>
} />(next:string, previous:string) -> string
Filter property is a function to filtrate input and return new output value. This function receives next and previous values of input field.
<MightyInput filter={
(next, prev) => next.length < 10 ? next : prev
} />(next:string, previous:string) -> void
Update event handler. It emits each time value (passed through filter) changes.
{
focus:string = '--focus',
}
Modifers property is an object with CSS classes for different states. It's using to simulate native CSS behavior for input wrapper. Currently it only has one option: focus.
MightyInput is inspired by Colin Kuebler's LDT.
MIT © Rumkin