React-material-icon-picker NPM

react-material-icon-picker

If you like the project, please give the project a GitHub 🌟

Demo

Install

npm install react-material-icon-picker

Usage

import { MaterialIconPicker } from 'react-material-icon-picker';

const MyComponent = () => {
  return (
    <div>
      <MaterialIconPicker />
    </div>
  );
};

Documentation

Props

Please visit the above link to view the full documentation.

defaultSearchValue?: string A default value for the search input box

searchValue?: string A fixed value for the search input box searchValue overrides defaultSearchValue

onSearchValueChange?: (value: string) => void A function that will be called when value of the search input box changes

onSearchValueSettled?: (value: string) => void A function that will be called when a new search value is settled

when 'return' key is hit when focusing on the search input box or
the Magnifying Glass icon is clicked

searchBoxPlaceholder?: string The placeholder value of the search input box

type?: Type type of material icons

type Type = {
  label: string;
  value: string;
};

onTypeChange?: (type: Type) => void A function that will be called when a new type is selected

hsva?: Hsva A fixed value for the color of material icons

type Hsva = {
  h: number;
  s: number;
  v: number;
  a: number;
};

onHsvaChange?: (hsva: Hsva) => void A function that will be called when the color of material icons changes

onIconClick?: (icon: string) => void A function that will be called when an icon is clicked

onIconMouseEnter?: (icon: string) => void A function that will be called when an icon is mouse entered

setIconTipText?: (icon: string) => string A function that customize icon tip

onIconsScroll?: (e: React.SyntheticEvent) => void

A function that is called when the icons container is scrolled

disableLoader?: boolean If true, disable the loader icon when user scrolls to the bottom (false as default)

styles?: IStyles Custom style of elements of the component

/*
StyleUpdater takes the original style of the element and returns the custom style of the element
*/

interface IStyles {
  container?: StyleUpdater;
  searchContainer?: StyleUpdater;
  searchIcon?: StyleUpdater;
  searchInput?: StyleUpdater;
  optionContainer?: StyleUpdater;
  typeContainer?: StyleUpdater;
  typeSelected?: StyleUpdater;
  typeArrow?: StyleUpdater;
  typeOptionsContainer?: StyleUpdater;
  typeOption?: StyleUpdater;
  colorSelectorContainer?: StyleUpdater;
  colorSelectedIndicator?: StyleUpdater;
  colorSelected?: StyleUpdater;
  colorSelectorArrow?: StyleUpdater;
  paletteContainer?: StyleUpdater;
  saturation?: StyleUpdater;
  hue?: StyleUpdater;
  iconsContainer?: StyleUpdater;
  iconContainer?: StyleUpdater;
  icon?: StyleUpdater;
  iconTip?: StyleUpdater;
  loaderContainer?: StyleUpdater;
  loader?: StyleUpdater;
  iconsContainerPlaceholder?: StyleUpdater;
}

type StyleObject = Record<string, string | number>;
type StyleUpdater = (baseStyle: StyleObject) => StyleObject;

Contributing

Your contribution is greatly appreciated! Feel free to fork the repo, make some changes, submit a pull-request! You may also submit a issue to report any bug:)