tbh-buttons v1.0.0

Package is usable, but WIP.Demo and source will be available here,their is no preset style

Installation

//Using npm
npm install tbh-buttons

//Using yarn
yarn add tbh-buttons

//Using CDN
<script src="https://unpkg.com/tbh-buttons@1.0.0/dist/tbh-buttons.min.js"></script>

Features

• Style using CSS,BS or tailwind etc
• Icons from your favourate, react-icons
• Share Util functions for few platforms
• Usable in a toast, dialog or sidebar etc
• Button components for loading, progress, progressbar, download

If you want more control while sharing, try the platform sdks,if available The examples here use share dialog (share url) for simplicity Not gauranteed to work on mobile/tablet devices

Example

import { TbBrandFacebook } from "react-icons/tb";
import { Icon, IconButton, IconContainer } from "tbh-buttons";
import { FaWhatsapp } from "react-icons/fa";
import { fbShare, sendWAMessage } from "tbh-buttons";

function App() {
  return (
    <>
      <IconContainer className="holder block my-4 space-x-1 space-y-1">
        <p className="text-xl font-thin my-4">Rounded Button Style</p>
        <IconButton
          type="button"
          className="fb"
          title="fbbtn"
          onClick={() => {
            fbShare("https://github.com");
          }}
        >
          <Icon iconComponent={TbBrandFacebook} className="fbicon" style={{ fontSize: "1rem" }} />
        </IconButton>
        <IconButton
          type="button"
          title="wabtn"
          onClick={() => {
            sendWAMessage("Check out this link at https://w3schools.com");
          }}
          className="bg-green-500 hover:bg-gray-100 transition duration-300 ease-in-out focus:outline-none border-none p-1 h-12 w-12 rounded-full group"
        >
          <Icon
            iconComponent={FaWhatsapp}
            className="text-white flex justify-center items-center transition-colors duration-300 ease group-hover:text-green-500"
          />
        </IconButton>
      </IconContainer>
    </>
  );
}

Supported Attributes

Resources

• React-Icons
• React-hot-toast
• mui

Visit above links for their license,as this project uses them.

Support

Sponsor or star this project.For issues, use discussions or open a new issue.

Contributing

Contributions are always welcome!

See Contributing.md for ways to get started.

Please adhere to this project's Code Of Conduct.

License

This project is licensed under the MIT License