npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-material-icon-picker

v0.0.7

Published

react material icon picker component

Downloads

407

Readme

react-material-icon-picker

npm package typescript code style: prettier

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

Demo

image info

Edit ReactMaterialIconPicker

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:)

License

MIT