Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-icons-picker

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-icons-picker

## Overview

  • 1.0.4
  • npm
  • Socket score

Version published
Weekly downloads
527
decreased by-22.16%
Maintainers
1
Weekly downloads
 
Created
Source

React-Icons Icon Picker

Overview

react-icons-picker is a React icon picker for react-icons icons. It contains both a picker component and an icon renderer. Doesn't need any css loader.

Icon Picker Demo

Installation

Install via npm

npm install react-icons-picker

or yarn

yarn add react-icons-picker

Usage

The IconPicker component is just like any other picker component. The value prop is the icon that is displayed on the picker. When a new icon is selected, the onChange handler is fired. You can customize the look and feel as you want by passing props or just selecting the css class.

import * as React from 'react'
import IconPicker from 'react-icons-picker'

export default () => {
  const [value, setValue] = useState("FaAdobe")
  return (
    <IconPicker value={value} onChange={(v) => setValue(v)} />
  )
}

You can also use the IconPickerItem component to render the icon. This uses react-icons under the hood.

import * as React from 'react'
import { IconPickerItem } from 'react-icons-picker'

export default () => (
  <IconPickerItem value="FaAdobe" size={24} color="#000" />
  )

All valid configurations/props of the package

IconPicker

PropTypeRequiredDescription
valuestringtrueThe current font awesome icon displayed on the picker.
onChange(v: string) => voidtrueA change handler that is executed when a new icon is selected.
modalEmptyContentReact elementfalseReact component that gets displayed when search result is empty
searchInputPlaceholderstringfalseThe placeholder text for search input
pickButtonStyleCSSPropertiesfalseStyles for the picker button
pickButtonFocusStyleCSSPropertiesfalseStyles for the picker button focus
modalFadeStyleCSSPropertiesfalseStyles for the modal window's background fade effect
modalWrapperStyleCSSPropertiesfalseStyles for the modal window's centered wrapper div
searchBarStyleCSSPropertiesfalseStyles for the search input's wrapper div element
searchInputStyleCSSPropertiesfalseStyles for the search input
searchInputFocusStyleCSSPropertiesfalseStyles for the search input's focus
modalContentWrapperStyleCSSPropertiesfalseStyles for the modal window's content wrapper div
modalIconsWrapperStyleCSSPropertiesfalseStyles for the wrapper element of search result of icons
modalIconsStyleCSSPropertiesfalseStyles for the each instance of search result of icons
modalIconNameStyleCSSPropertiesfalseStyles for the each instance of search result of icon names
modalIconsHoverStyleCSSPropertiesfalseStyles for the hovering effect of each search result icons
modalEmptyWrapperStyleCSSPropertiesfalseStyles for the wrapper element of empty search result container

IconPickerItem

PropTypeRequiredDescription
valuestringtrueThe name of the icon to render. Example: "FaAdobe"
sizenumberfalseThe size of the icon. Default: 24
colorstringfalseThe color of the icon. Default: "#000"

Contribution Guide

If you are interested in contributing, please submit a PR.

Contributors

  • Nyambayar Saintogtokh

FAQs

Package last updated on 10 Oct 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc