react-material-icon-picker
v0.0.7
Published
react material icon picker component
Downloads
407
Maintainers
Readme
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>
);
};
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