single-select-react-jc

Tiny (19kB) react single-select drop down component.

Install

$ npm install --save single-select-react-jc

Usage

Basic

import SelectMenu from 'single-select-react-jc'

<SelectMenu data={data} />

If no data provided, component will be visible but disabled

Data Format

Can be either a list of arrays or list of objects.

export const carsArray = [
  ['BMW','./images/bmw.jpeg'],
  ['Honda','./images/honda.png'],
  ['Toyota','./images/toyota.jpeg'],
  ['Nissan','./images/nissan.jpeg'],
  ['Chevrolet','./images/chevy.png'],
  ['Ford','./images/ford.png'],
  ['Ferrari','./images/ferrari.jpeg'],
  ['Lamborghini','./images/lambo.jpeg']
];

export const animeObject = [
  {'value': 'Jujutsu Kaisen', 'logo': './images/jjk.jpeg'},
  {'value': 'One Piece', 'logo': './images/onepiece.jpeg'},
  {'value': 'Naruto', 'logo': './images/naruto.jpeg'},
  {'value': 'Attack on Titan', 'logo': './images/AoT.jpeg'},
  {'value': 'Food Wars', 'logo': './images/fw.jpeg'},
  {'value': 'Pokemon', 'logo': './images/pikachu.jpeg'},
  {'value': 'My Hero Acadamia', 'logo': './images/mha.jpeg'}
];

Nested objects supported.

export const countriesObj = [
  {
    'value': 'USA',
    'logo': "https://www.countries-ofthe-world.com/flags-normal/flag-of-United-States-of-America.png",
    'subOptions': [
      {
        'value': 'San Jose',
        'logo': 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Flag_of_San_Jos%C3%A9%2C_California.svg/255px-Flag_of_San_Jos%C3%A9%2C_California.svg.png',
        'subOptions': [],
      },
      {
        'value': 'San Francisco',
        'logo': 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Flag_of_San_Francisco.svg/255px-Flag_of_San_Francisco.svg.png',
        'subOptions': [],
      },
      {
        'value': 'Los Angeles',
        'logo': 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Los_Angeles%2C_California.svg/1200px-Flag_of_Los_Angeles%2C_California.svg.png',
        'subOptions': [],
      },
      {
        'value': 'San Diego',
        'logo': 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_San_Diego%2C_California.svg/1200px-Flag_of_San_Diego%2C_California.svg.png',
        'subOptions': [],
      },
      {
        'value': 'Tehachapi',
        'logo': 'https://media-cdn.tripadvisor.com/media/photo-s/02/66/e1/91/filename-railroad-watertower.jpg',
        'subOptions': [],
      },
    ]
  },
  {
    'value': 'Japan',
    'logo': 'https://i.pinimg.com/originals/7a/3d/90/7a3d9097761a637b3be29cd0dc6f7971.jpg',
    'subOptions': [
      {
        'value': 'Tokyo',
        'logo': 'https://www.crwflags.com/fotw/images/j/jp-13.gif',
        'subOptions': [],
      },
      {
        'value': 'Kyoto',
        'logo': 'https://www.crwflags.com/fotw/images/j/jp-26.gif',
        'subOptions': [],
      },
      {
        'value': 'Osaka',
        'logo': 'https://www.crwflags.com/fotw/images/j/jp-27.gif',
        'subOptions': [],
      },
    ]
  },
  {
    'value': 'Germany',
    'logo': 'https://www.countries-ofthe-world.com/flags-normal/flag-of-Germany.png',
    'subOptions': [
      {
        'value': 'Munich',
        'logo': 'https://www.crwflags.com/fotw/images/d/de-ba-m1.gif',
        'subOptions': [],
      },
      {
        'value': 'Berlin',
        'logo': 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/1200px-Flag_of_Berlin.svg.png',
        'subOptions': [],
      },
      {
        'value': 'Frankfurt',
        'logo': 'https://upload.wikimedia.org/wikipedia/commons/2/2e/Flag_of_the_Free_City_of_Frankfurt.svg',
        'subOptions': [],
      },
    ]
  },
  {
    'value': 'Wakanda',
    'logo': 'https://i.redd.it/yvzgtslorrg01.png',
    'subOptions': [],
  },
];

SubOption name can be specified by user

export const countriesArr = [
  [
    'USA',
    'https://www.countries-ofthe-world.com/flags-normal/flag-of-United-States-of-America.png',
    [
      [
        'San Jose',
        'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Flag_of_San_Jos%C3%A9%2C_California.svg/255px-Flag_of_San_Jos%C3%A9%2C_California.svg.png',
        []
      ],
      [
        'San Francisco',
        'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Flag_of_San_Francisco.svg/255px-Flag_of_San_Francisco.svg.png',
        []
      ],
      [
        'Los Angeles',
        'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Flag_of_Los_Angeles%2C_California.svg/1200px-Flag_of_Los_Angeles%2C_California.svg.png',
        []
      ],
      [
        'San Diego',
        'https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_San_Diego%2C_California.svg/1200px-Flag_of_San_Diego%2C_California.svg.png',
        []
      ],
      [
        'Tehachapi',
        'https://media-cdn.tripadvisor.com/media/photo-s/02/66/e1/91/filename-railroad-watertower.jpg',
        []
      ]
    ]
  ],
  [
    'Japan',
    'https://i.pinimg.com/originals/7a/3d/90/7a3d9097761a637b3be29cd0dc6f7971.jpg',
    [
      [
        'Tokyo',
        'https://www.crwflags.com/fotw/images/j/jp-13.gif',
        []
      ],
      [
        'Kyoto',
        'https://www.crwflags.com/fotw/images/j/jp-26.gif',
        []
      ],
      [
        'Osaka',
        'https://www.crwflags.com/fotw/images/j/jp-27.gif',
        []
      ]
    ]
  ],
  [
    'Germany',
    'https://www.countries-ofthe-world.com/flags-normal/flag-of-Germany.png',
    [
      [
        'Munich',
        'https://www.crwflags.com/fotw/images/d/de-ba-m1.gif',
        []
      ],
      [
        'Berlin',
        'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Berlin.svg/1200px-Flag_of_Berlin.svg.png',
        []
      ],
      [
        'Frankfurt',
        'https://upload.wikimedia.org/wikipedia/commons/2/2e/Flag_of_the_Free_City_of_Frankfurt.svg',
        []
      ],
    ]
  ],
  [
    'Wakanda',
    'https://i.redd.it/yvzgtslorrg01.png',
    []
  ]
];

Demo

API

Props

Name | Default | Type | Description -----|---------|------|------------ centered | false | {bool} | Center component in parent container disabled | false | {bool} | Show component as disabled floated | | {enum} | Position component in parent containerEnums:left right hidden | | {bool} | Component visibility hidden name | | {string} | Name of input element onChange | | {func} | Set parent variable on change onClick | | {func} | Set parent variable on click placeholder | | {string} | Placeholder text size | | {enum} | Component width within parent containerEnums:mini small medium full striped | | {enum} | Alternate striping of menu optionsEnums:lightgrey lightcyan lightgreen lightpink sub | | {string} | User-specified keyword for subcategory

Accessibility

• Tab focuses to component
• Keyboard Up / Down arrow navigation
• Enter selects first matching option
• Esc closes menu

Development

npm install
npm run react-dev
npm start (http://localhost:3003)

License

single-select-react-jc is released under the ISC license.