Input

v.3.0.1

Installation

yarn

yarn add @mercell/input-react

pnpm

pnpm add @mercell/input-react

npm

npm install --save @mercell/input-react

The Input has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Input component is as simple as importing it like this.

import {
    Input,
    InputLeftAddon,
    InputRightAddon,
    InputContainer,
    InputLeftElement,
    InputRightElement,
} from '@mercell/input-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! const InputWrapper = () => { const ref = React.useRef(null); React.useEffect(() => { ref.current.focus(); }, []); return ( <div> <div className="mb-10"> <label>Empty</label> <Input placeholder="Placeholder" /> </div> <div className="mb-10"> <label>Focused</label> <Input ref={ref} /> </div> <div className="mb-10"> <label>Default</label> <Input /> </div> <div className="mb-10"> <label>Invalid</label> <Input required pattern="[🐻]" /> <p className="text-invalid">This is an error message</p> </div> <div className="mb-10"> <label>With Icon</label> <InputContainer className="mb-10"> <InputLeftElement> <Download32 className="" /> </InputLeftElement> <Input placeholder="Placeholder" /> </InputContainer> <InputContainer> <Input placeholder="Placeholder" /> <InputRightElement> <Download32 className="" /> </InputRightElement> </InputContainer> </div> <div className="mb-10"> <label>With addons</label> <InputContainer className="mb-10"> <InputLeftAddon> www. </InputLeftAddon> <Input placeholder="Placeholder" /> </InputContainer> <InputContainer> <Input placeholder="Placeholder" /> <InputRightAddon> .com </InputRightAddon> </InputContainer> </div> </div> ) } render(<InputWrapper />)

// You can play with code, with HTML tags and text as much as you want!
    const InputWrapper = () => {
        const ref = React.useRef(null);
            React.useEffect(() => {
                ref.current.focus();
            }, []);
        return (
            <div>
                <div className="mb-10">
                    <label>Empty</label>
                    <Input placeholder="Placeholder" />
                </div>
                <div className="mb-10">
                    <label>Focused</label>
                    <Input ref={ref} />
                </div>
                <div className="mb-10">
                    <label>Default</label>
                    <Input />
                </div>
                <div className="mb-10">
                    <label>Invalid</label>
                    <Input required pattern="[🐻]" />
                    <p className="text-invalid">This is an error message</p>
                </div>
                <div className="mb-10">
                    <label>With Icon</label>
                    <InputContainer className="mb-10">
                        <InputLeftElement>
                            <Download32 className="" />
                        </InputLeftElement>
                        <Input placeholder="Placeholder" />
                    </InputContainer>
                    <InputContainer>
                         <Input placeholder="Placeholder" />
                         <InputRightElement>
                            <Download32 className="" />
                        </InputRightElement>
                    </InputContainer>
                </div>
                <div className="mb-10">
                    <label>With addons</label>
                    <InputContainer className="mb-10">
                        <InputLeftAddon>
                            www.
                        </InputLeftAddon>
                        <Input placeholder="Placeholder" />
                    </InputContainer>
                    <InputContainer>
                         <Input placeholder="Placeholder" />
                         <InputRightAddon>
                            .com
                        </InputRightAddon>
                    </InputContainer>
                </div>
            </div>
        )
    }
    render(<InputWrapper />)

Result

Types, definitions, etc.

Types

Input

Input has type JSX.IntrinsicElements['input'] with possible reference to be passed.

InputLeftElement

InputLeftElement has type JSX.IntrinsicElements['span'] with possible reference to be passed.

InputRightElement

InputRightElement has type JSX.IntrinsicElements['span'] with possible reference to be passed.

InputLeftAddon

InputLeftAddon has type JSX.IntrinsicElements['div'] with possible reference to be passed.

InputRightAddon

InputRightAddon has type JSX.IntrinsicElements['div'] with possible reference to be passed.

Changelog

Change Log - @mercell/input-react

This log was last generated on Fri, 25 Nov 2022 08:14:58 GMT and should not be manually modified.

3.0.1

Fri, 25 Nov 2022 08:14:58 GMT

Patches

• Fix in design

3.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library

2.1.0

Tue, 25 Oct 2022 10:31:44 GMT

Minor changes

• Added forwardRef to the InputContainer

2.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

1.0.8

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

1.0.7

Wed, 09 Mar 2022 10:29:16 GMT

Patches

• Change of disabled status

1.0.6

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

1.0.5

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

1.0.4

Fri, 04 Feb 2022 10:28:53 GMT

Patches

• Div/input 100% width style

1.0.3

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Move dependencies to peerDependencies to avoid duplication in installation process in project
• Adding the same peerDependencies to devDependencies

1.0.2

Wed, 26 Jan 2022 12:53:55 GMT

Patches

• Style fix

1.0.1

Fri, 21 Jan 2022 13:08:25 GMT

Patches

• Package json udpate

1.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card