1.0.2 • Published 2 years ago

react-toggle-peiss v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

0. image

react-toggle-peiss

1.you can install to type to terminal.

  npm i react-toggle-peiss
  npm start

2.just import this top of your code.

  import ReactToggle from "react-toggle-peiss"

3.and then you can use like this

    <ReactToggle
      setToggleState={false}
      onToggle={(boolean)=>console.log(boolean)}
      containerWidth={"44px"}
      containerHeight={"24px"}
      containerBG={"#61be82"}
      buttonWidth={"16px"}
      buttonHeight={"16px"}
      buttonBG={"#fafafa"}
      buttonMove={"24px"}
    />

3-1.real code sample

import React from 'react'
import ReactToggle from "react-toggle-peiss"
const ToggleTest = () => {
  return (
    <div>
      <ReactToggle
        setToggleState={false}
        onToggle={(boolean)=>console.log(boolean)}
        containerWidth={"44px"}
        containerHeight={"24px"}
        containerBG={"#61be82"}
        buttonWidth={"16px"}
        buttonHeight={"16px"}
        buttonBG={"#fafafa"}
        buttonMove={"24px"}
      />
    </div>
  )
}

export default ToggleTest

4. this is thte param description

  setToggleState: current state value
  onToggle: you can set the event or catch the param inside when you toggled
  containerWidth: width of toggle container
  containerHeight: height of toggle container
  containerBG: background color of toggle container
  buttonWidth: width of toggle button
  buttonHeight: height of toggle button
  buttonBG: background color of toggle background
  buttonMove: put inside the length that can move from your left side