Neutrino-UI

Props

1interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
2    hasError?: boolean;
3    name: string;
4    value?: string;
5    onFocusHandler?: (value: string, event?: React.FocusEvent<HTMLInputElement>) => void;
6    onBlurHandler?: (value: string , event?: React.FocusEvent<HTMLInputElement>) => void;
7    onChangeHandler: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
8}

Type: text

1import { Input } from 'neutrino-ui';
2const [value, setValue] = useState('');
3
4<Input
5  name="text"
6  onChangeHandler={(value, event) => setValue(value)}
7  value={value}
8  css={{width: '300px'}}/>

Change look with Theme

1import { ThemeProvider } from 'emotion-theming';
2import { Input, createTheme } from 'neutrino-ui';
3
4const myTheme = createTheme({
5    colors: {
6        mainColors: {
7            primary: 'green',
8        },
9        textColors: {
10            text: 'red'
11        },
12        pageElementsColors: {
13            formElements: '#222C3C',
14        },
15    },
16});
17
18<ThemeProvider theme={myTheme}>
19  <Input
20    name="text"
21    onChangeHandler={(value, event) => setValue(value)}
22    value={value}
23  />
24</ThemeProvider>

hasError = true (After form validation)

1<Input
2  name="text"
3  onChangeHandler={(v, e) => setValue(v)}
4  value={value}
5  hasError />

Set focus

1import React, { useState, createRef } from 'react';
2import { ThemeProvider } from 'emotion-theming';
3import { Input, Button } from 'neutrino-ui';
4
5function Form() {
6  const [value, setValue] = useState('');
7  const inputRef = createRef<HTMLInputElement>();
8  const setFocus = () => inputRef?.current?.focus();
9
10  return (
11    <Button onClick={setFocus} variant="primary">Set focus</Button>
12    <Input
13      name="text"
14      ref={inputRef}
15      onChangeHandler={(v, e) => setValue(v)}
16      value={value} />
17  )
18}