https://github.com/teamwertarbyte/material-ui-toggle-icon

An animated toggle icon for Material-UI.
https://github.com/teamwertarbyte/material-ui-toggle-icon

icon material material-ui react toggle ui

Last synced: about 2 months ago
JSON representation

An animated toggle icon for Material-UI.

• Host: GitHub
• URL: https://github.com/teamwertarbyte/material-ui-toggle-icon
• Owner: TeamWertarbyte
• License: mit
• Created: 2017-09-29T23:32:05.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:31:46.000Z (about 2 years ago)
• Last Synced: 2024-12-14T13:48:37.363Z (about 2 months ago)
• Topics: icon, material, material-ui, react, toggle, ui
• Language: JavaScript
• Homepage: https://mui.wertarbyte.com/#material-ui-toggle-icon
• Size: 935 KB
• Stars: 35
• Watchers: 3
• Forks: 12
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# material-ui-toggle-icon

This project provides a toggle icon for [Material-UI][mui].

![Demo](demo.gif)

If you want to try the component yourself instead of watching a gif, head over to [the styleguide][styleguide] for a live demo!

## Installation

```shell

npm i --save material-ui-toggle-icon

```

## Usage

The component takes two icons and a boolean that tells it whether to display the `onIcon` or the `offIcon`. When `on` is changed, the icon is switched with a transition.

```jsx

import ToggleIcon from "material-ui-toggle-icon";

import IconButton from "@material-ui/core/IconButton";

import Visibility from "@material-ui/icons/Visibility";

import VisibilityOff from "@material-ui/icons/VisibilityOff";

export default class ToggleIconButton extends Component {

  state = { on: false };

  render() {

     setState((state) => ({ on: !state.on }))}>

      }

        offIcon={}

      />

    ;

  }

}

```

## Properties

| Name      | Type      | Default | Description                                                  |

| --------- | --------- | ------- | ------------------------------------------------------------ |

| offIcon\* | `element` |         | The icon to be displayed if the `on` prop is set to `false`. |

| onIcon\*  | `element` |         | The icon to be displayed if the `on` prop is set to `true`.  |

| on\*      | `bool`    |         | Controls whether the `onIcon` or the `offIcon` is displayed. |

| style     | `object`  |         | Override the inline-styles of the root element.              |

\* required property

## License

The files included in this repository are licensed under the MIT license.

[mui]: http://www.material-ui.com/#/

[styleguide]: https://mui.wertarbyte.com/#material-ui-toggle-icon