Neurologically Paralyzing Mouseovers

    @idui/react-inputs
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.13 • Public • Published

    Input React Component

    NPM Size JavaScript Style Guide Coverage Status LICENSE

    Install

    npm install --save @idui/react-inputs
    yarn add @idui/react-inputs

    TextInput

    import React from 'react'
    import { TextInput } from '@idui/react-inputs'
    
    function Example() {
        const [value, setValue] = useState('');
    
        return (
            <TextInput
                value={value}
                onChange={setValue}
                type="text"
                
                onlyValue // call onChange with value, true by default
                isClearable // whether show clear icon or not, true by default
                onClear={undefined} // clear icon click handler, if not specified onChange with empty value called instead
                rightAddon={<SomeIcon />}
                leftAddon={<AnotherIcon />}
                disabled={false}
                hasError={false}
    
                mask="+7 (999)-999-99-99"// See @idui/react-mask-input mask, undefined by default
                maskPlaceholder="+7 (___)-___-__-__" // See @idui/react-mask-input maskPlaceholder
            />
        );
    }

    NumberInput

    import React from 'react'
    import { NumberInput } from '@idui/react-inputs'
    
    function Example() {
        const [value, setValue] = useState('');
    
        return (
            <NumberInput
                value={value}
                onChange={setValue}
                type="text"
                onlyValue // call onChange with value, true by default
                thousandsSeparator=" " // separator inserted between thousands, space by default
                countOfDigitsAfterPoint={2} // count of digits in integral part of float value, undefined by default
                // ... TextInput props
            />
        );
    }

    useNumberInput hook

    import React from 'react'
    import { useNumberInput } from '@idui/react-inputs'
    
    function Example({ value: providedValue, onChange  }) {
        const {value, ...handlers} = useNumberInput({
            onChange,
            countOfDigitsAfterPoint: undefined,
            thousandsSeparator: ", ",
            onlyValue: true,
            value: providedValue,
        });
    
        return (
            <input
                value={value}
                {...handlers}
            />
        );
    }

    SearchInput

    import React from 'react'
    import { SearchInput } from '@idui/react-inputs'
    
    function Example() {
        const [value, setValue] = useState('');
    
        return (
            <SearchInput
                value={value}
                onChange={setValue}
                type="text"
                onlyValue // call onChange with value, true by default
                searchTimeout={300} // time interval during which onChange called only once, 300 by default
                showSearchIcon // whether show search icon or not, true by default
                searchIconPlacement="left" // show search icon 
                // ... TextInput props
            />
        );
    }

    useSearchInput hook

    import React from 'react'
    import { useNumberInput } from '@idui/react-inputs'
    
    function Example({ value: providedValue, onSearch  }) {
        const {value, ...handlers} = useSearchInput({
            onChange: onSearch,
            searchTimeout: 300,
            onlyValue: true,
            value: providedValue,
        });
    
        return (
            <input
                value={value}
                {...handlers}
            />
        );
    }

    TagInput

    import React from 'react'
    import { TagInput } from '@idui/react-inputs'
    
    function Example() {
        const [value, setValue] = useState(["tag1"]);
    
        return (
            <TagInput
                value={value}
                onChange={setValue}
                type="text"
                onlyValue // call onChange with value, true by default
                searchTimeout={300} // time interval during which onChange called only once, 300 by default
                showSearchIcon // whether show search icon or not, true by default
                searchIconPlacement="left" // show search icon 
                // ... TextInput props
            />
        );
    }

    Input

    import React from 'react'
    import Input from '@idui/react-inputs'
    
    function Example(props) {
        const [value, setValue] = useState('');
    
        return (
            <Input
                value={value}
                onChange={setValue}
                // type="number" => NumberInput
                // type="search" => SearchInput
                // type="tag" // TagInput
                // any other type => TextInput
                
                // ... props for typed input
            />
        );
    }

    Styling

    import React from 'react';
    import styled from 'styled-components';
    import { TextInput } from '@idui/react-inputs'; // or any other type of Input
    
    const customColors = {
      default: {
        border: '#B3B3B3',
        color: '#313131',
        placeholder: '#B3B3B3',
        tag: '#14B9E4',
      },
      disabled: {
        border: '#f1eded',
        color: '#f1eded',
        tag: '#B3B3B3',
      },
      error: {
        border: '#C02908',
        color: '#C02908',
        background: '#FDDCDC',
        tag: '#C02908',
      },
      focused: {
        border: '#14B9E4',
        tag: '#11AFD9',
      },
    };
    
    const StyledTextInput = styled(TextInput)`
      min-height: 50px;
      padding: 12px 10px;
      border-radius: 15px;
      width: 500px;
      font-size: 16px;
    `;
    
    export function StylingExample({
      onChange,
      value: providedValue,
      onlyValue,
      ...props
    }) {
      const [value, setValue] = useState(providedValue);
    
      useEffect(() => {
        setValue(providedValue);
      }, [providedValue]);
    
      const handleChange = useCallback(
        (e) => {
          setValue(onlyValue ? e : e.target.value);
          onChange(e);
        },
        [onChange, onlyValue]
      );
    
      return (
        <StyledTextInput
          {...props}
          value={value}
          onChange={handleChange}
          onClear={undefined}
          colors={customColors}
        />
      );
    }

    License

    MIT © kaprisa57@gmail.com

    Install

    npm i @idui/react-inputs

    DownloadsWeekly Downloads

    76

    Version

    1.1.13

    License

    MIT

    Unpacked Size

    43.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • kaprisa57