Wondering what’s next for npm?Check out our public roadmap! »

    @hawk-ui/input

    2.13.1 • Public • Published

    Installation

    To install a component run

    $ npm install @hawk-ui/input --save

    Please import CSS styles via

    @import '/path__to__node_modules/@hawk-ui/input/dist/index.min.css

    Usage

    Without Label and Without Required:

    Demo

    import Input from '@hawk-ui/input';
    initialState = {
      value: '',
    };
    
    <Input
      type="text"
      value={state.value}
      onChange={(event) => {
        setState({
          value: event.target.value,
        });
      }}
      onEnter={(value) => {
        alert(value);
      }}
      placeholder="Enter Username"
      description="This is user input"
    />

    With Copy

    Demo

    import Input from '@hawk-ui/input';
    initialState = {
      value: '',
    };
    
    <Input
      type="text"
      value={state.value}
      id="copy"
      isCopyable
      onChange={(event) => {
        setState({
          value: event.target.value,
        });
      }}
      onEnter={(value) => {
        alert(value);
      }}
      placeholder="Enter Username"
    />

    With Password Visible

    Demo

    import Input from '@hawk-ui/input';
    initialState = {
      value: '',
    };
    
    <Input
      type="password"
      value={state.value}
      isPasswordVisible
      onChange={(event) => {
        setState({
          value: event.target.value,
        });
      }}
      onEnter={(value) => {
        alert(value);
      }}
      placeholder="Enter Username"
    />

    With Label and With Required

    Demo

    import Input from '@hawk-ui/input';
    initialState = {
      value: '',
    };
    
    <Input
      type="text"
      onChange={(event) => {
        setState({
          value: event.target.value,
        });
      }}
      onEnter={(value) => {
        alert(value);
      }}
      placeholder="Enter Username"
      label="Username"
      isRequired
      isError
      errorMessage="This field is a compulsory field."
    />

    Textarea With Label

    Demo

    import Input from '@hawk-ui/input';
    initialState = {
      value: '',
    };
    
    <Input
      type="text"
      isTextarea
      htmlAttributes={{
        rows: '3',
        cols: '30',
      }}
      onChange={(event) => {
        setState({
          value: event.target.value,
        });
      }}
      onEnter={(value) => {
        alert(value);
      }}
      placeholder="Enter Address"
      label="Address"
    />

    Install

    npm i @hawk-ui/input

    DownloadsWeekly Downloads

    50

    Version

    2.13.1

    License

    MIT

    Unpacked Size

    41.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar