Checkbox React

checkbox.js

import React from 'react'
import styled from 'styled-components'

const CheckboxContainer = styled.div`
  display: inline-block;
  vertical-align: middle;
`

const Icon = styled.svg`
  fill: none;
  stroke: #f3123c;
  stroke-width: 3.5px;
`
// Hide checkbox visually but remain accessible to screen readers.
// Source: https://polished.js.org/docs/#hidevisually
const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
  border: 0;
  clip: rect(0 0 0 0);
  clippath: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
`

const StyledCheckbox = styled.div`
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 3px;
  border: 2px solid #333;
  transition: all 150ms;

 

  ${Icon} {
    visibility: ${props => (props.checked ? 'visible' : 'hidden')}
  }
`

const Checkbox = ({ className, checked, ...props }) => (
  <CheckboxContainer className={className}>
    <HiddenCheckbox checked={checked} {...props} />
    <StyledCheckbox checked={checked}>
      <Icon viewBox="0 0 24 24">
        <polyline points="21 4 10 16 3 10" />
      </Icon>
    </StyledCheckbox>
  </CheckboxContainer>
)

export default Checkbox

// Usage

import Checkbox from './Checkbox'

class App extends React.Component {
  state = { checked: true }

  handleCheckboxChange = event => {
    this.setState({ checked: event.target.checked })
  }

  render() {
    return (
      <div style={{ fontFamily: 'system-ui' }}>
        <label>
          <Checkbox
            checked={this.state.checked}
            onChange={this.handleCheckboxChange}
          />
          <span style={{ marginLeft: 8 }}>Label Text</span>
        </label>
      </div>
    )
  }
}

////////////////////////////// estilos de options e select
import React from 'react';

import { flavourOptions } from './docs/data';
import Select from 'react-select';

const colourStyles = {

  // estilos do select em si
  control: styles => ({ ...styles, backgroundColor: 'white', border:'none' }),
  dropdownIndicator: styles => ({ ...styles, 
    display: "none"
  }),
  indicatorSeparator: styles => ({ ...styles, 
    display: "none"
  }),
  //estilos das options
  option: styles => ({
    color:"#000",
     padding:30,
     '&:hover': {
       backgroundColor:'#f3123c',
       color: '#fff',
       
     }
  })
 
};

export default () => (
  <Select
    drop
    label="Single select"
    options={flavourOptions}
    styles={colourStyles}
  />
);