react-disable-icon

    1.0.3 • Public • Published

    React-Disable-Icon

    An icon manager to visually disable icons

    MIT license npm version npm size

    Demo

    Live demo and sandbox

    Installation

    React-Disable-Icon is available as an npm package.

    // with npm
    npm install react-disable-icon

    Usage

    import React, { useState } from "react"
    import IconSwitch from "react-disable-icon"
    
    function App() {
    const [disabled, setDisabled] = useState(true)
    
    return (
    	<IconSwitch disabled = {disabled} Icon = {<img src = "/react.svg" width="80" height="80"/>} onClick = {()=>setDisabled(!disabled)}/>
    )}

    Props

    Prop Names Type Required? Default Description
    disabled bool required false Whether icon should have a slash
    onClick function required N/A Function called when icon is clicked
    Icon Rendered React Component required N/A The icon
    disabledColor string optional #000 Default color of slash
    className string optional N\A Class name applied to SVG Slash

    Examples

    import React, { useState } from "react"
    import IconSwitch from "react-disable-icon"
    
    function App() {
    const [disabled, setDisabled] = useState(true)
    return (
    	<IconSwitch disabled = {disabled} onClick = {()=>setDisabled(!disabled)} Icon = {
    		<svg viewbox = "0 0 45 45" width = "44" height = "44">
    			<circle cx="22" cy="22" r="21" stroke="black" stroke-width="1" fill="red" />
    		</svg> }/>
    )}
    import React, { useState } from "react"
    import IconSwitch from "react-disable-icon"
    
    function App() {
    const [disabled, setDisabled] = useState(true)
    return (
    	<IconSwitch disabled = {disabled} Icon = {
    		<img src = "/react.svg" fill = {disabled ? "rgb(115,115,115)" : "#61dafb" } className ={\`reactIcon\${disabled ? "" : " active"}\`} width="80" height="80" style = {{cursor:"pointer"}}/>
    	} disabledColor="rgb(115,115,115)" onClick = {()=>setDisabled(!disabled)}/>
    )}
    
    /*
    CSS
    .reactIcon:hover, .reactIcon:hover + svg {
    fill:rgb(90, 90, 90)
    }
    
    .reactIcon.active:hover{
    fill:rgb(99, 183, 206)
    }
    */

    Install

    npm i react-disable-icon

    DownloadsWeekly Downloads

    4,629

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    6.52 kB

    Total Files

    4

    Last publish

    Collaborators

    • matthewgferrari