DEMO Note: React version 16.8.0
Inspiration from codrops
Form inputs offer a great opportunity to add some subtle and interesting effects to a web page. They are elements that your user will interact with at some point and making them fun to use can enhance the experience. We are used to the default form resembling its paper counterpart but in the digital world we can be more creative
- InputAkira
- InputIchiro
- InputJiro
- InputKuro
- InputMadoka
- InputMaterial
- InputMinoru
- InputNao
- InputSoda
- InputYoko
import React, {useState} from 'react';
import InputAkira from 'react-input-ui/collection/akira';
function App() {
const [value, setValue] = useState('');
return (
<InputAkira
label={'Akira UI'}
placeholder='type...'
onChanhe={setValue}
value={value}
/>
)
}If you need change style for label or input tag, just use property:
labelStyle inputStyle
in other cases: style className
import React, {useState} from 'react';
import InputAkira from 'react-input-ui/collection/akira';
function App() {
const [value, setValue] = useState('');
return (
<InputAkira
label={'Akira UI'}
placeholder='type...'
onChanhe={setValue}
value={value}
style={{margin: '25px'}}
className={'custom-class'}
labelStyle={{fontSize: '18px'}}
inputStyle={{fontSize: '21px'}}
/>
)
}If field not valid set property error to
true
If field valid set property error to
false
If don't need validation set property error to
null
import React, {useState} from 'react';
import InputAkira from 'react-input-ui/collection/akira';
function App() {
const [value, setValue] = useState('');
const [error, setError] = useState(null);
const handleChange = e => {
setValue(e.target.value);
};
const handleFocus = () => {
setError(null);
};
const handleSubmit = () => {
setError(!!value.length > 2);
}
return (
<div>
<InputAkira
label={'Akira UI'}
placeholder='type...'
onChange={handleChange}
onFocus={handleFocus}
value={value}
error={error}
/>
<button onClick={handleSubmit}>SUBMIT</button>
</div>
)
}Theme has 4 property:
| Theme property: |
|---|
| activeTextColor |
| focusColor |
| hoverColor |
| mainColor |
To change them use theme method
import React, {useState} from 'react';
import InputAkira, {theme} from 'react-input-ui/collection/akira';
function App() {
const [value, setValue] = useState('');
const handleSetTheme = () => {
theme({
activeTextColor: '#101010',
focusColor: '#2196f3',
hoverColor: '#252525',
mainColor: '#727272',
})
};
return (
<div>
<InputAkira
label={'Akira UI'}
placeholder='type...'
onChanhe={setValue}
value={value}
/>
<button onClick={handleSetTheme}>CHANGE THEME</button>
</div>
)
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent