Module: IconToggle

Parameters:

Name	Type	Description
props	Object	Attributes other than followings are passed to the button element of React as is. Properties Name Type Attributes Description className string <optional> The class name that is added to the root element. iconClassName string <optional> The class name that is added to the icon element. This property is valid only when offIcon or onIcon property is specified. offIcon string <optional> The inner text of the “off” icon element. This property is ignored when child element is specified. onIcon string <optional> The inner text of the “on” icon element. This property is ignored when child element is specified. isOnState boolean <optional> Specifies true if initail state is “on”. Default to false. label string | Array.<string> <optional> The label of icon togle button. This property maps to aria-label attribute. If aria label is changed depening on icon button state, specify an array with two elements, whose first element is the label for on state and the second element is the label for off state. disablesMdcInstance boolean <optional> Specifies true if you do not want to instantiate MDCRipple Component. MDCIconButtonToggle is instantiated regardless of the setting of this property. Default to false. mdcIconButtonToggleRef React.MutableRefObject <optional> MutableRefObject which bind an MDCIconButtonToggle instance to. mdcRippleRef React.MutableRefObject <optional> MutableRefObject which bind an MDCRipple instance to. The instance is not bind if props.disablesMdcInstance is true.

Source:

• icon-toggle.jsx, line 66

Returns:

Type

DetailedReactHTMLElement

Example

import { IconToggle } from 'material-react-js';

function MyVisibilityToggleButton(props) {
  switch (props.type) {
    case 'material':
      return <IconToggle iconClassName="material-icons"
                         offIcon="visibility_off"
                         onIcon="visibility"
                         label="visibility"/>;
      // The following code also returns the same output
      // return (
      //   <IconToggle label="visibility">
      //     <IconToggle.OffIcon className="material-icons">visibility_off</IconToggle.OffIcon>
      //     <IconToggle.OnIcon className="material-icons">visibility</IconToggle.OnIcon>
      //   </IconToggle>
      // );
    case 'image':
      return (
        <IconToggle label="visibility">
          <IconToggle.OffImage src="./img/visibility_off.png" alt="visibility_off"/>
          <IconToggle.OnImage src="./img/visibility.png" alt="visibility"/>
        </IconToggle>
      );
    case 'svg':
      return (
        <IconToggle label="visibility">
          <IconToggle.OffSVG viewBox="0 0 24 24">
            ...
          </IconToggle.OffSVG>
          <IconToggle.OnSVG viewBox="0 0 24 24">
            ...
          </IconToggle.OnSVG>
        </IconToggle>
      );
    default:
      throw new Error('unknown icon type');
  }
}