Allow for text instead of icons

[outlawpractice]

I put a div with some text in the field, like this:

<ReactSwitch className='FilterSwitch'
              onChange={this.onFilterClick}
              checked={this.state.showOptionPanel}
              uncheckedIcon={<div className='uncheckedIcon'>NO FILTERS</div>}
              checkedIcon={<div className='checkedIcon'>FILTERS</div>}
              height={isMobile ? 25 : 20}
              width={isMobile ? 100 : 90}
/>

It worked as long as I used labels like 'on' and 'off', but rendered strangely when I used larger words like 'Filtered' and 'Unfiltered'.

I fixed that with minor changes index.jsx, allowing for fixed with via the property. It just adds a ternary to the calculation of width within checkedIconStyle and uncheckedIconStyle:

const checkedIconStyle = {
            height,
            width: this.props.width ? (this.props.width - this.$handleDiameter) : Math.min(
                height * 1.5,
                width - (this.$handleDiameter + height) / 2 + 1
            ), ...

Works like a charm for me, although the user has to manually take over styles for the text, as it generally requires changes to font size and margins to look good. This worked for me:

.checkedIcon, .uncheckedIcon {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: .7rem;
  font-weight: bold;
  font-variant: small-caps;
}

.checkedIcon {
  padding-left: 4px;
}

.uncheckedIcon {
  padding-left: 2px;
}

Plus a little change when using mobile/small screens with a media query:

.uncheckedIcon, .checkedIcon {
    font-size: .7rem;
    padding-left: .3rem;
    padding-right: .3rem;
  }

[markusenglund]

Good write-up. Yeah, this component was not really built for using long words as you've noticed. I think this use-case is a bit too uncommon to build special functionality for it.

There is actually a kind of hacky way to control the width of the icon-divs with css like this:

.react-switch-bg > div {
  width: 80px !important;
}

This could let you avoid having to change the components source code.

[outlawpractice]

This is actually quite common with Material Design and Apple apps (mobile). Looks great, too!

John Margaglione john@outlawpractice.com 512-569-1528

---

From: Markus Englund notifications@github.com Sent: Wednesday, January 30, 2019 4:14 PM To: markusenglund/react-switch Cc: John Margaglione; Author Subject: Re: [markusenglund/react-switch] Allow for text instead of icons (#28)

Good write-up. Yeah, this component was not really built for using long words as you've noticed. I think this use-case is a bit too uncommon to build special functionality for it.

There is actually a kind of hacky way to control the width of the icon-divs with css like this:

.react-switch-bg > div { width: 80px !important; }

This could let you avoid having to change the components source code.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/markusenglund/react-switch/issues/28#issuecomment-459131195, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AoINCu1jD5y18j-p_qPl9iHjtjnEt5H1ks5vIhkngaJpZM4aLr6N.