Home > Software engineering >  How can I remove the icon tooltip from react-toggle?
How can I remove the icon tooltip from react-toggle?

Time:04-07

I'm new at frontend and I was wondering if I can remove this tooltip from a ReactToggle iconenter image description here

CodePudding user response:

import React from 'react'
import PropTypes from 'prop-types'
import ReactToggle from 'react-toggle'

import 'react-toggle/style.css'

const Toggle = ({ name, disabled, className, value, onChange }) => (
  <ReactToggle
    id={name}
    name={name}
    disabled={disabled}
    checked={value}
    className={className}
    onChange={e => onChange && onChange(e.target.checked)}
  />
)
Toggle.propTypes = {
  // The input name
  name: PropTypes.string,
  // If true, the toggle is disabled
  disabled: PropTypes.bool,
  // Class for the toggle
  className: PropTypes.string,
  // The value of the input (checked: true, unchecked: false)
  value: PropTypes.bool,
  // Callback function (returns boolean)
  onChange: PropTypes.func,
}

export default Toggle

CodePudding user response:

You must pass icons prop as false, according to the docs.

For example:

const Toggle = ({ name, disabled, className, value, onChange }) => (
  <ReactToggle
    id={name}
    name={name}
    disabled={disabled}
    checked={value}
    className={className}
    icons={false} <-----
    onChange={e => onChange && onChange(e.target.checked)}
  />
);
  • Related