AM Matt Button Toggle

The AM Matt Button Toggle is a library that allows developers to create custom toggle buttons easily. This library is developed using React and is heavily customizable, making it perfect for developers who want complete control over the design and functionality of their toggle buttons.

Features

• Customizable design - developers can customize the color, size, shape, and animation of the toggle button according to their needs.
• Easy to use - the AM Matt Button Toggle is straightforward to use with just a few lines of code.
• Lightweight - the library is designed to be lightweight with minimal dependencies, ensuring fast loading times.

Installation

The library can be installed using npm or yarn:

npm install am-matt-button-toggle

yarn add am-matt-button-toggle

Usage

To use the AM Matt Button Toggle, import it into your React component and render it:

import React from 'react';
import { Toggle } from 'am-matt-button-toggle';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false,
    };
  }

  handleToggle = () => {
    this.setState((prevState) => ({
      checked: !prevState.checked,
    }));
  };

  render() {
    return (
      <Toggle
        checked={this.state.checked}
        onChange={this.handleToggle}
        onLabel={'On'}
        offLabel={'Off'}
        borderRadius={'20px'}
        activeColor={'#FFFFFF'}
        inactiveColor={'#D8D8D8'}
        width={'60px'}
        height={'30px'}
      />
    );
  }
}

export default App;

Props

| Prop Name | Type | Default Value | Description | | ------------- | -------- | ------------------------------------------- | --------------------------------------------------------------------- | | checked | boolean | false | Whether the toggle button is checked or not. | | onChange | function | | A callback function to handle toggle changes. | | onLabel | string | 'On' | The label for the on state of the toggle button. | | offLabel | string | 'Off' | The label for the off state of the toggle button. | | borderRadius | string | '20px' | The border radius of the toggle button. | | activeColor | string | '#FFFFFF' | The background color of the on state of the toggle button. | | inactiveColor | string | '#D8D8D8' | The background color of the off state of the toggle button. | | width | string | '60px' | The width of the toggle button. | | height | string | '30px' | The height of the toggle button. |

Conclusion

The AM Matt Button Toggle is a versatile and easy-to-use library that provides developers with complete control over the design and functionality of toggle buttons. It is lightweight, customizable, and works seamlessly with React. Whether you want to display a simple on/off toggle button or a more complex toggle button, this library has got you covered.