❤
npm
Sign UpSign In

@arterial/select

3.0.0 • Public • Published

Arterial Select

Another React Material Select

Installation

npm install @arterial/select

Usage

Styles

Sass

@use "@material/floating-label/index.scss" as floating-label;
@use "@material/line-ripple/index.scss" as line-ripple;
@use "@material/notched-outline/index.scss" as notched-outline;
@use "@material/select/select.scss" as select;
@use "@material/select/select-helper-text.scss" as select-helper-text;
@use "@material/select/select-icon.scss" as select-icon;
@include floating-label.core-styles;
@include line-ripple.core-styles;
@include notched-outline.core-styles;
@include select-helper-text.helper-text-core-styles;
@include select-icon.icon-core-styles;
@include select.core-styles;

CSS

import '@material/select/dist/mdc.select.css';

JSX

import {Select} from '@arterial/select';

Filled Select

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Filled() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="Filled"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Outlined Select

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Outlined() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="Outlined"
      label="Outlined"
      onSelect={handleSelect}
      options={OPTIONS}
      outlined
      value={value}
    />
  );
}

Other Variants

Leading Icon

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function LeadingIcon() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      icon="restaurant_menu"
      id="filled-leading-icon"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Invalid

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Invalid() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-invalid"
      invalid
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Label Floating

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function LabelFloating() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-label-floating"
      label="Filled"
      labelFloating
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Menu Width

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function MenuWidth() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-menu-width"
      label="Filled"
      menuWidth="100%"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

No Label

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function NoLabel() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-no-label"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Placeholder

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Placeholder() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-placeholder"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      placeholder="Placeholder"
      value={value}
    />
  );
}

Required

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Required() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-required"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      required
      value={value}
    />
  );
}

Loader

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Loader() {
  const [value, setValue] = useState('');
  const [loading, setLoading] = useState(false);
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <>
      <Button
        label="Start Loader"
        onClick={() => {
          setLoading(true);
          setTimeout(() => {
            setLoading(false);
          }, 5000);
        }}
        style={{marginBottom: '8px'}}
      />
      <Select
        disabled={loading}
        id="filled-loader"
        label="Filled"
        labelFloating
        onSelect={handleSelect}
        options={OPTIONS}
        placeholder={loading ? 'Loading...' : null}
        trailingIcon={loading ? <CircularProgress small /> : null}
        value={value}
      />
    </>
  );
}

Disabled

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function Disabled() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      disabled
      id="filled-disabled"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Helper Text Object

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function HelperTextObject() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      helperText={{
        validationMsg: true,
        validationMsgPersistent: true,
        text: 'Helper text as object.',
      }}
      id="filled-helper-text-object"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Helper Text Component

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function HelperTextComponent() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      helperText={
        <HelperText
          validationMsgPersistent
          validationMsg
          text="Helper text as component."
        />
      }
      id="filled-helper-text-component"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Pre-selected Option

const OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function PreSelected() {
  const [value, setValue] = useState('banana');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-pre-selected"
      label="Filled"
      onSelect={handleSelect}
      options={OPTIONS}
      value={value}
    />
  );
}

Disabled Options

const DISABLED_OPTIONS = [
  {text: 'Apple', value: 'apple', disabled: true},
  {text: 'Banana', value: 'banana'},
  {text: 'Orange', value: 'orange'},
];
function DisabledOptions() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-disabled-options"
      label="Filled"
      onSelect={handleSelect}
      options={DISABLED_OPTIONS}
      value={value}
    />
  );
}

Enhanced Options

The option object in the options array must have text and value props. The option object also accepts disabled, graphic, node, and meta props. The graphic and meta props will appear as they do on a list item component. The node prop is for any element/elements to be displayed to right of list item text. You can use selectedText to convert an node that displays an icon into text when the option is selected. For example if you have a lock icon in your option, then you can use selectedText to make it appear as '(Private)'.

const ENHANCED_OPTIONS = [
  {text: 'Apple', value: 'apple'},
  {text: 'Banana', value: 'banana'},
  {
    text: 'Orange',
    value: 'orange',
    node: (
      <Icon
        icon="favorite"
        style={{color: 'rgba(0,0,0,.38)', marginLeft: '8px'}}
      />
    ),
    selectedText: 'Orange (Favorite)',
  },
];
function EnhancedOptions() {
  const [value, setValue] = useState('');
  function handleSelect(option) {
    setValue(option.value);
  }
  return (
    <Select
      id="filled-enhanced-options"
      label="Filled"
      onSelect={handleSelect}
      options={ENHANCED_OPTIONS}
      value={value}
    />
  );
}

Props

Select

Name Type Description
children node Elements to be displayed within root element.
className string Classes to be applied to the root element.
disabled boolean Indicates whether the element is disabled.
helperText node Gives context about a select, such as how the selection will be used.
icon string | node Icon to render within root element.
id string Id of the element.
invalid boolean Indicates the select is invalid.
label string Text to be displayed within the root element.
labelFloating boolean Inidcates whether the elements label is floating.
menuWidth string Sets the menu width of the select.
onSelect function Select event handler.
options object* Items to be displayed as a menu list.
outlined boolean Enables an outlined variant.
placeholder string Text to be displayed in the select when it has no value set.
required boolean Indicates whether the select is required.
style object Styles to be applied to the root element.
trailingIcon string | node Icon to render on the right side of the root element.
value string Value of input.

NOTE: Options shape is { disabled: boolean, graphic: node, meta: node, node: node, secondaryText: string, selectedText: string, text: string, value: string }

HelperText

Name Type Description
className string Classes to be applied to the root element.
id string Id of the element.
validationMsg boolean Indicates the helper text is a validation message.
validationMsgPersistent boolean Makes the helper text permanently visible.
text string Text to be displayed.

Readme

Keywords

none

Package Sidebar

Install

npm i @arterial/select

Repository

github.com/jdc2000/arterial-components

Homepage

github.com/jdc2000/arterial-components#readme

Weekly Downloads

4

Version

3.0.0

License

MIT

Unpacked Size

35.7 kB

Total Files

4

Last publish

Collaborators

  • jdc2000
Try on RunKit
Report malware