@lg-chat/input-bar NPM

Input Bar

Installation

Yarn

yarn add @lg-chat/input-bar

NPM

npm install @lg-chat/input-bar

Example

import { InputBar } from '@lg-chat/input-bar';

return <InputBar badgeText="Beta" />;

Output HTML

<form class="leafygreen-ui-xw0iqe">
  <div class="leafygreen-ui-1yu3c6o">
    <div class="leafygreen-ui-18jjswl">
      <svg
        width="16"
        height="16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        class="leafygreen-ui-jc2z8v"
        role="img"
        aria-label="Wizard Icon"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M13.327 3.277c.188-.38-.236-.8-.618-.613l-2.513 1.223a.461.461 0 01-.523-.095L7.603 1.74c-.314-.313-.829-.062-.75.365l.517 2.808a.421.421 0 01-.228.46L4.63 6.596c-.383.186-.277.761.154.839l2.832.513a.477.477 0 01.382.379l.517 2.808c.079.427.659.532.846.153l1.234-2.492a.427.427 0 01.464-.225l2.832.512c.43.078.683-.432.368-.744l-2.07-2.052a.452.452 0 01-.095-.519l1.233-2.491zM7 10.5c.353-.35.312-.958-.091-1.359-.404-.4-1.017-.44-1.37-.09L1.84 12.713c-.353.35-.312.958.092 1.358.403.4 1.017.44 1.37.09L7 10.5z"
          fill="currentColor"
        ></path>
      </svg>
      <div class="leafygreen-ui-1qtf7xy">Beta</div>
    </div>
    <textarea
      placeholder="Type your message here"
      class="leafygreen-ui-1iwn37a"
      style="height: 20px !important;"
    ></textarea>
    <div class="leafygreen-ui-37kxwn">
      <button
        type="submit"
        class="lg-ui-button-0000 leafygreen-ui-118vxo3"
        aria-disabled="false"
      >
        <div class="leafygreen-ui-v038xi"></div>
        <div class="leafygreen-ui-v95oty">
          Enter<svg
            width="16"
            height="16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            class="leafygreen-ui-15rby6h"
            role="presentation"
            aria-hidden="true"
            alt=""
          >
            <path
              d="M3 6.832h6.944L8.41 5.297a1 1 0 010-1.414l.24-.239a1 1 0 011.414 0l3.382 3.383c.01.008.018.017.027.026l.24.239a1 1 0 010 1.414l-3.652 3.651a1 1 0 01-1.414 0l-.239-.239a1 1 0 010-1.414L9.941 9.17H3a1 1 0 01-1-1v-.338a1 1 0 011-1z"
              fill="currentColor"
            ></path>
          </svg>
        </div>
      </button>
    </div>
  </div>
</form>

Properties

Prop	Type	Description	Default
`badgeText`	`string`	If provided, renders a badge with text next to the wizard icon
`darkMode`	`boolean`	Determines if the component will render in dark mode	`false`
`onMessageSend`	`(messageBody: string, e: FormEvent) => void`	Callback fired when message is sent
`shouldRenderGradient`	`boolean`	Determines if component renders with gradient box-shadow	`true`
`textAreaProps`	`TextareaAutosizeProps`	`TextareaAutosize` props spread on textarea component
`disabled`	`boolean`	Determines whether the user can interact with the InputBar
`disableSend`	`boolean`	When defined as `true`, disables the send action and button
`...`	`HTMLElementProps<'form'>`	Props spread on the root element

TextareaAutosizeProps

Prop	Type	Description	Default
`maxRows`	`number`	maximum number of rows to display
`minRows`	`number`	minimum number of rows to display

@leafygreen-ui/badge @leafygreen-ui/button @leafygreen-ui/emotion @leafygreen-ui/hooks @leafygreen-ui/icon @leafygreen-ui/input-option @leafygreen-ui/lib @leafygreen-ui/palette @leafygreen-ui/polymorphic @leafygreen-ui/popover @leafygreen-ui/search-input @leafygreen-ui/tokens @leafygreen-ui/typography lodash react-keyed-flatten-children react-textarea-autosize

26 days ago

1 month ago

2 months ago

2 months ago