# react-material-ui-icon-picker

> material-ui-icon-picker

Latest version **0.0.1** (published 2017-10-05) · 0 weekly downloads

## Install

```sh
npm install react-material-ui-icon-picker
pnpm add react-material-ui-icon-picker
yarn add react-material-ui-icon-picker
bun add react-material-ui-icon-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2017-10-05 |
| First published | 2017-10-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Daniele De Matteo |
| Maintainers | dandem |
| Keywords | react, react-component, material-ui, icon-picker |

## Links

- npm: https://www.npmjs.com/package/react-material-ui-icon-picker
- Repository: https://github.com/DMDc0de/material-ui-icon-picker
- Issues: https://github.com/DMDc0de/material-ui-icon-picker/issues
- npm.io page: https://npm.io/package/react-material-ui-icon-picker

## Dependencies (7)

- [ramda](https://npm.io/package/ramda.md) ^0.24.1
- [radium](https://npm.io/package/radium.md) ^0.19.4
- [classnames](https://npm.io/package/classnames.md) ^2.1.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [material-ui](https://npm.io/package/material-ui.md) ^0.19.3
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^2.0.3
- [promise-defer](https://npm.io/package/promise-defer.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2017-10-05

## README

# material-ui-icon-picker

Presents a [material-ui](http://www.material-ui.com/#/) dialog with an up-to-date list of material icons. allowing the user to pick one.
The chosen icon will be returned in the `onPick` callback.


## Demo & Examples

Live demo: [DMDc0de.github.io/material-ui-icon-picker](http://DMDc0de.github.io/material-ui-icon-picker/)

To build the examples locally, run:

```
npm install
npm start
```

Then open [`localhost:8000`](http://localhost:8000) in a browser.


## Installation

The easiest way to use react-material-ui-icon-picker is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).

You can also use the standalone build by including `dist/react-material-ui-icon-picker.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.

```
npm install react-material-ui-icon-picker --save
```


## Usage

```javascript
import React from 'react';
import MaterialUiIconPicker from 'react-material-ui-icon-picker';

class MyComponent extends React.Component {
    
    showPickedIcon = (icon) => {
        console.info(icon) // prints {name: "access_alarm", code: "e190"}
    }
    
    render() {
        return (
            <MaterialUiIconPicker onPick={this.showPickedIcon} />
        )
    }
}

```

### Properties
| Property|Type|Required|description
| --- | --- | --- | --- |
| **onPick**| *function* | *required* | Gets called when the user chooses an icon |
| **label**| *string* | *optional* | Defaults to `'Pick icon'`, it's the the label of the button that opens the dialog |
| **pickLabel**| *string* | *optional* | Defaults to `'Pick'`, it's the the label of the primary dialog button |
| **cancelLabel**| *string* | *optional* | Defaults to `'Cancel'`, it's the label of the secondary dialog button |
| **modalTitle**| *string* | *optional* | Defaults to `'Material icon picker'`, it's the title of the modal |




### Notes

The list gets fetched directly from `https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/codepoints`.
One of the dependencies breaks the build with `npm start` when using
 
```
gulp -v
CLI version 1.4.0
Local version 3.9.1

```
To fix this

```
cd node_modules/gulp-git/
npm install require-dir@0.3.2

```

## Development (`src`, `lib` and the build process)

**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).

## License

See LICENSE

Copyright (c) 2017 Daniele De Matteo.

---
_Source: https://npm.io/package/react-material-ui-icon-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._