switch-multi-button

    1.2.0 • Public • Published

    Introduction

    The switch-multi-button is a react package to create a component to switch to multiple buttons or toggle components with a movable animation.



    • This package has a sweep movement when active button changes!


    • You can cutomize components styles and it has a automatic computing items size when your device changes to horizontal or vertical positioning in responisze page.

    • Support rtl and ltr languages.

    Package size:

        package size:     4.9KB
        gzipped size:     2.1KB



    aaa



    Installation


    npm:
        npm install --save switch-multi-button

    yarn:
        yarn add switch-multi-button



    Links:

    To see complete exmaples and document, refer to homepage at bottom link

        Homepage site(document, examples,...)


        [Npm link](https://www.npmjs.com/package/switch-multi-button)
        [Github link](https://github.com/mohammadbrzbrz72/switch-multi-button)



    Example

    import { useState } from 'react';
    import { SwitchMultiButton } from 'switch-multi-button';
    
    function Example = () => {
      const [state, setState] = useState('first');
    
      <SwitchMultiButton
        value={state} // set as default button
        setValue={setState}
        buttons={[
          {
            text: 'my first button',
            value: 'first'
          },
          {
            text: 'second button',
            value: 'second'
          },
          {
            text: 'third button',
            value: 'third'
          },
        ]}
      />
    }


    import { useState } from 'react';
    import { SwitchMultiButton } from 'switch-multi-button';
    
    function Example = () => {
      const [state, setState] = useState('یک');
    
      <SwitchMultiButton
        value={state} // set as default button
        setValue={setState}
        direction="rtl"
        buttons={[
          {
            text: 'شماره اول',
            value: 'یک'
          },
          {
            text: 'شماره ی دوم',
            value: 'دو'
          },
          {
            text: 'شماره ی سوم',
            value: 'سه'
          },
        ]}
      />
    }



    change custom active button by index or value


    import { useState, useRef } from "react";
    import { SwitchMultiButton } from "switch-multi-button";
    
    function Component() {
      const [state, setState] = useState("one");
      const changeTo = useRef();
    
      return (
        <div>
          <SwitchMultiButton
            value={state}
            setValue={setState}
            changeTo={changeTo}
            buttons={[
              {
                text: "first button",
                value: "one",
              },
              {
                text: "second button",
                value: "two",
              },
            ]}
          />
    
          <button
            onClick={() => {
              changeTo.current.byValue("one");
            }}
          >
            Change active button by value
          </button>
    
          <button
            onClick={() => {
              changeTo.current.byIndex(2);
            }}
          >
            Change active button by index
          </button>
        </div>
      );
    }



    Document: website (For more information)



    SwitchMultiButton.propTypes = {
      /**
       * root style
       */
      style: PropTypes.object,
    
      /**
       * set state
       */
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    
      /**
       * set your setState callback
       */
      setValue: PropTypes.func.isRequired,
    
      /**
       * you can change active button by sending ref as props
       * and changing active button with value or index.
       * usage:
       * changeTo.current.byValue('some-value');
       * changeTo.current.byIndex(2);
       */
      changeTo: PropTypes.object,
    
      /**
       * each object in array creates a button for you,
       * {
       *  text: show button label or children
       *  value: every button have to be unique value
       *  key: set your unique custom (default: package handle)
       *  Button: item element type (default: 'div'), (custom: 'a', 'p', 'pre', ... etc.)
       *  props: {} can be set all of the element props as object property.  => { onclick: () =>{}, ...}
       * }
       */
      buttons: PropTypes.array.isRequired,
    
      /**
       * root className
       */
      className: PropTypes.string,
    
      /**
       * button transition time. 1 equal to 1 seconds
       */
      transition: PropTypes.number,
    
      /**
       * language direction
       */
      direction: PropTypes.oneOf(["ltr", "rtl"]),
    
      /**
       * {
       *  toggleContext: undefined,
       *  removeCss: false,
       *  userSelect: 'none'
       * }
       * see document for more info
       */
      options: PropTypes.object,
    };
    
    

    Install

    npm i switch-multi-button

    DownloadsWeekly Downloads

    34

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • mohammadbrzbrz72