rcaferati/react-awesome-button

React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱

React <AwesomeButton /> UI Component

react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons. Bundled together with a social share and progress enabled components.

Key Features

• 60fps 3D animated button
• Animated progress button
• Social icons and network specific share methods
• OnPress ripple effect
• Look and feel customisable and extendable in two ways: via CSS custom properties or SASS variables and lists (scss config file).
• Use it with CSSModules or **Plain CSS

Live demo

Checkout the live demo with the CSS customizer at awesome-button.caferati.me.

Figma File

Import it directly into your Figma project.

You can run the storybook locally on 6006 by cloning this repository and running npm run storybook

Installation

npm install --save react-awesome-button

Styling with plain CSS and CSS Modules

Plain CSS

import { AwesomeButton } from 'react-awesome-button';
import 'react-awesome-button/dist/styles.css';

function Button() {
  return <AwesomeButton type="primary">Button</AwesomeButton>;
}

CSS Modules

import { AwesomeButton } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss';

function Button() {
  return (
    <AwesomeButton cssModule={AwesomeButtonStyles} type="primary">
      Button
    </AwesomeButton>
  );
}

AwesomeButton rendered with a button tag

Renders the component with a button HTML tag and an onPress prop called on animation release.

import { AwesomeButton } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss';

function Button() {
  return (
    <AwesomeButton
      cssModule={AwesomeButtonStyles}
      type="primary"
      onPress={() => {
        // do something
      }}>
      Button
    </AwesomeButton>
  );
}

AwesomeButton rendered with an anchor tag

Render the component with an anchor HTML tag setting the href attribute.

import { AwesomeButton } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss';

function Button() {
  return (
    <AwesomeButton
      cssModule={AwesomeButtonStyles}
      type="primary"
      href="https://google.com">
      Button
    </AwesomeButton>
  );
}

AwesomeButton props

Attribute	Type	Default	Description
type	string	primary	Render a specific button type, styled by the .scss type list
size	string	auto	Render a specific button size, styled by the .scss size list
element	node	null	Overwrites the default container element renderer, useful for using it with react-router Link component.
disabled	bool	false	Render the disabled button
visible	bool	true	Toggle button visibility
ripple	bool	false	Sets up the button with the onPress ripple effect
placeholder	bool	true	Should render the animated placeholder on empty children
onPress	function	null	Default pressRelease event function
onPressed	function	null	Event function triggered only on full button press
onReleased	function	null	Event function triggered on button full animation release
onMouseDown	function	null	Event function coupled with the element's onMouseDown
onMouseUp	function	null	Event function coupled with the element's onMouseUp
href	string	null	Forces the button to be rendered on an anchor container and sets the href to the specified value
className	string	null	Adds a className to the button container element
style	object	null	Passes a style object to the container element
containerProps	object	null	Exposes an option for freely adding props to the button container element
cssModule	object	null	Accepts a css module configuration from the themed module.scss files
target	string	null	When used together with href renders an anchor with a specific target attribute
before	React.Node	null	Render a node before the main content span container; useful for setting icons
after	React.Node	null	Render a node after the main content span container; useful for setting icons
between	string	null	Sets the content elements relation to space-between; useful for setting icons
active	bool	false	When set to true activates the pressIn animation

AwesomeButtonProgress basic example

Checkout this example live on the storyboard.

import { AwesomeButtonProgress } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss';

function Button() {
  return (
    <AwesomeButtonProgress
      cssModule={AwesomeButtonStyles}
      type="primary"
      onPress={(event, release) => {
        // do a sync/async task then call `release()`
      }}>
      Button
    </AwesomeButtonProgress>
  );
}

AwesomeButtonProgress specific props

Being a wrapper on the AwesomeButton component, it accepts its props plus the following ones.

Attribute	Type	Default	Description
onPress	function	null	Default onPress function returning the event and a button release strategy
loadingLabel	string	Wait ..	Progress button loading label text
resultLabel	string	Success!	Progress button success label text
releaseDelay	number	500	Delay for releasing the button after the progress animation

AwesomeButtonSocial basic example

If nothing is passed on the sharer prop, the component automatically gets the page's own title and og:image properties; otherwise, it's setup by the sharer.

  import { AwesomeButtonSocial } from 'react-awesome-button';
  import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'

  function Button() {
    return (
      <AwesomeButtonSocial
        cssModule={AwesomeButtonStyles}
        type="facebook"
        sharer={{
          url="https://caferati.me"
        }}
      >
        Button
      </AwesomeButton>
    );
  }

AwesomeButtonSocial whatsapp example

  import { AwesomeButtonSocial } from 'react-awesome-button';
  import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'

  function Button() {
    return (
      <AwesomeButtonSocial
        cssModule={AwesomeButtonStyles}
        type="whatsapp"
        sharer={{
          phone: '############',
          message: 'Whatsapp init message'
        }}
      >
        Button
      </AwesomeButton>
    );
  }

AwesomeButtonSocial specific props

Being a wrapper on the AwesomeButton component, it accepts its props plus the following ones.

Attribute	Type	Default	Description
type	string	null	Render a button type (Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit, Messenger, Whatsapp)
icon	bool or Dimensions	true	Setting to false avoids icon rendering; if the dimensions type is passed in {width: number, height: number}, configures the button size
sharer.url	string	null	Url string to be used on the sharer
sharer.image	string	null	Image url to be rendered on the sharer
sharer.message	string	null	Message string to be rendered on the shared post
sharer.phone	string	null	Phone number to be used when using the Whatsapp sharer type
sharer.user	string	null	Username to be redirected when using the Messenger sharer type

React Native Version

Checkout the React Native version of the Awesome Button UI Component at rcaferati/react-native-really-awesome-button

Author

Rafael Caferati

• Checkout my Full-Stack Web Developer Website
• Other open source projects @ Code Laboratory
• A scope of my work @ Web Developer Portfolio

License

MIT. Copyright (c) 2019 Rafael Caferati.

react-awesome-button's Issues

fakePress not working

Is there a fakePress option? if so how would you use it?

Force Button State

Hi,

first of all really like these react elements. They add a lot of style to my app. Is there anyway to force the button state. I want to control if the button stays pressed or not.

6.1.0 All button hover effects seem to be malfunctioning

I'm not sure if it's just me, but ever since changing to 6.1.0 the hover effect on all the buttons no longer works as intended. It seems like the left side of the button no longer triggers the animation while the right side does.

I switched to 6.0.0 and everything works as intended now. The only reason why I even changed to 6.1.0 was because AwesomeButtonProgress didn't have the prop onPress and was named action instead.

[6.2.0] ParserError: Syntax Error at line: 1 (./node_modules/react-awesome-button/dist/styles.css)

thanks for making awesome product 🚀

just after upgrading, I've noticed:

I'm using "react-scripts": "3.2.0",

AwesomeButton: onPress not triggered

The onPress event doesn't seem to trigger in the simple AwesomeButton.

Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty.

Hi - I'm fairly new to React in general. I've trying the simplest usage of this component, yet browser becomes plagued with this JS error as soon as the mouse is over the button. CPU goes to 100% and fans run at full speed. The animation and interaction with the button becomes laggy and stutters instatly.

Uncaught DOMException: Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty.
    at toggleMoveClasses (http://localhost:3000/static/js/0.chunk.js:4406:34)
    at AwesomeButton.clearPress (http://localhost:3000/static/js/0.chunk.js:4716:35)
    at onMouseLeave (http://localhost:3000/static/js/0.chunk.js:4784:17)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:6150:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:6199:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:6252:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/0.chunk.js:6267:29)
    at executeDispatch (http://localhost:3000/static/js/0.chunk.js:6352:7)
    at executeDispatchesInOrder (http://localhost:3000/static/js/0.chunk.js:6377:9)
    at executeDispatchesAndRelease (http://localhost:3000/static/js/0.chunk.js:9261:9)
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/0.chunk.js:9270:14)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (http://localhost:3000/static/js/0.chunk.js:9240:13)
    at runEventsInBatch (http://localhost:3000/static/js/0.chunk.js:9287:7)
    at runExtractedPluginEventsInBatch (http://localhost:3000/static/js/0.chunk.js:9497:7)
    at handleTopLevel (http://localhost:3000/static/js/0.chunk.js:9541:9)
    at batchedEventUpdates$1 (http://localhost:3000/static/js/0.chunk.js:27687:16)
    at batchedEventUpdates (http://localhost:3000/static/js/0.chunk.js:6759:16)
    at dispatchEventForLegacyPluginEventSystem (http://localhost:3000/static/js/0.chunk.js:9551:9)
    at attemptToDispatchEvent (http://localhost:3000/static/js/0.chunk.js:10271:9)
    at dispatchEvent (http://localhost:3000/static/js/0.chunk.js:10192:23)
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:35969:16)
    at dispatchUserBlockingUpdate (http://localhost:3000/static/js/0.chunk.js:10175:7)

What am I missing ? Here is my App.js

import { AwesomeButton, AwesomeButtonProgress } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'
import './App.css';



function App() {

  return (
    <div className="App">
      <header className="App-header">
        <p>
        <AwesomeButton
              cssModule={AwesomeButtonStyles}
              type="primary">
              Hello World
            </AwesomeButton>
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Theme styles required?

What

Great work!

Minor thing, I believe a newcomer to using the component may be confused by the README.md example versus the demo page. I think the README version needs another import for one of the the theme styles to show out of the box as expected.

i.e

import { AwesomeButton } from 'react-awesome-button';
import 'react-awesome-button/dist/styles.css';
import 'react-awesome-button/dist/themes/theme-blue.css';

How to Call Error on AwesomeButtonProgress

Hi,

The docs have the following:

 <AwesomeButtonProgress
                            action={(element, next) => this.doSomethingThenCall(next)}
                            type={'secondary'}>LIVE! Request An Update</AwesomeButtonProgress>

How would we pull up the ErrorLabel in case of failure?

Any typescript support?

AwesomeButtonProgress hanging after onPress

Hi,

Thanks a lot for the awesome library. I am trying to integrate with my NextJS Typescript project.

While AwesomeButton is working fine, AwesomeButtonProgress doesn't work. The button remains in pressed state, and the callback isn't invoked for some reason. Please help.

Here is the code for your reference:
...
<AwesomeButtonProgress type="primary" onPress={(element: any, next: Function) => {
id ? updateCallback(id, cfs) : addCallback(id, cfs)
setTimeout(() => next(), 500)}}>
....

Appreciate your help in advance.

Many Thanks,
Umang

Adding different icons to AwesomeButtonSocial

I've been looking through the icons.js file in the react-awesome-button/src/components/AwesomeButtonSocial folder in an attempt to change some of the social media icons. It seems each icon image is encoded within this file, represented by some sort of string. For example:

youtube:
'M38.1,23H11.9c-4.1,0-7.6,3.4-7.6,7.6v6.1c0,4.1,3.4,7.6,7.6,7.6h26.3c4.1,0,7.6-3.4,7.6-7.6v-6.1C45.8,26.4,42.4,23,38.1,23z M17.4,27.7h-2.5v12.2h-2.4V27.7h-2.5v-2h7.3V27.7z M24.3,39.9h-2.1v-1.2c-0.4,0.4-0.8,0.8-1.2,0.9c-0.4,0.3-0.8,0.3-1.2,0.3c-0.5,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.3-0.8-0.3-1.4v-8.6h2.1v8c0,0.3,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.6-0.3c0.3-0.2,0.4-0.3,0.7-0.6v-7.9h2.1v10.6H24.3z M31.9,37.7c0,0.8-0.2,1.4-0.5,1.7C31,39.8,30.5,40,29.9,40c-0.4,0-0.8-0.1-1.1-0.3c-0.3-0.2-0.6-0.4-0.9-0.7v0.8h-2.1V25.7h2.1v4.6c0.3-0.3,0.6-0.6,0.9-0.8c0.3-0.2,0.7-0.3,0.9-0.3c0.7,0,1.2,0.3,1.5,0.7s0.5,1.1,0.5,1.9L31.9,37.7L31.9,37.7z M39.2,34.9h-4v1.9c0,0.6,0.1,0.9,0.2,1.2c0.2,0.3,0.3,0.3,0.7,0.3c0.3,0,0.6-0.1,0.8-0.3c0.2-0.2,0.2-0.6,0.2-1.2v-0.5h2.2v0.5c0,1.1-0.3,1.9-0.8,2.5c-0.5,0.5-1.3,0.8-2.4,0.8c-0.9,0-1.7-0.3-2.2-0.8C33.3,38.8,33,38,33,37v-4.7c0-0.9,0.3-1.7,0.9-2.2c0.6-0.6,1.4-0.8,2.3-0.8c0.9,0,1.7,0.3,2.2,0.8c0.5,0.5,0.8,1.3,0.8,2.3V34.9z M36.1,30.9c-0.3,0-0.6,0.1-0.7,0.3c-0.2,0.2-0.3,0.5-0.3,0.9v1.1H37v-1.1c0-0.4-0.1-0.8-0.3-0.9C36.6,31.1,36.4,30.9,36.1,30.9z M28.8,30.9c-0.2,0-0.3,0-0.4,0.1c-0.2,0.1-0.3,0.2-0.4,0.3v6.5c0.2,0.2,0.3,0.3,0.5,0.3c0.2,0.1,0.3,0.1,0.5,0.1c0.3,0,0.4-0.1,0.6-0.3c0.1-0.2,0.2-0.4,0.2-0.8v-5.4c0-0.3-0.1-0.6-0.3-0.8C29.4,31,29.1,30.9,28.8,30.9z M15.3,19.4h2.6v-6.5l3.1-9.1h-2.7L16.7,10h-0.2l-1.7-6.3h-2.7l3.2,9.5V19.4z M24.6,19.6c1.1,0,1.9-0.3,2.5-0.8s0.9-1.4,0.9-2.4v-6c0-0.8-0.3-1.6-0.9-2.2s-1.4-0.8-2.4-0.8c-1.1,0-1.9,0.3-2.5,0.8c-0.7,0.5-0.9,1.3-0.9,2.1v6c0,1,0.3,1.8,0.9,2.4C22.8,19.4,23.6,19.6,24.6,19.6z M23.7,10.3c0-0.3,0.1-0.4,0.3-0.6c0.2-0.2,0.4-0.3,0.7-0.3c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.3,0.3,0.6v6.3c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.4,0.3-0.8,0.3s-0.6-0.1-0.8-0.3c-0.2-0.2-0.3-0.4-0.3-0.8L23.7,10.3L23.7,10.3z M31.6,19.5c0.4,0,0.9-0.1,1.4-0.3c0.5-0.3,0.9-0.6,1.4-1.1v1.3h2.4V7.8h-2.4v8.8c-0.3,0.3-0.4,0.4-0.8,0.6c-0.3,0.2-0.5,0.3-0.7,0.3c-0.3,0-0.4-0.1-0.5-0.2c-0.1-0.1-0.2-0.3-0.2-0.6V7.8h-2.4v9.6c0,0.7,0.2,1.2,0.4,1.5C30.7,19.4,31.1,19.5,31.6,19.5z'

I was wondering what this alpha numeric string represents, what sort of encoding this may be, and how can I encode my own icons to add to my buttons in my project. Thank you.

Ripple effect is not working on touch device

Because TouchEvent.pageX/pageY is undefined and causes a short flicker instead of the wanted ripple effect.
Tested with Android and Mobile Device Emulation in Chrome DevTools with More Tools > Sensors > Touch: Force enabled.

componentWillReceiveProps Deprecation

From my console

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Changing Button Color

I'm having problems changing the color of the button. I'm not using sass.

Works with typescript?

(7,10): Module '"/home/lemon/project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

How to reset state for AwesomeButtonProgress ?

If AwesomeButtonProgress fails, the button is disabled.
How to reset it and to make it enabled again ?

AwesomeButtonProgress call next when flag is true

I have the the below thing which is common .
In my reducer there is a loading variable , it goes true when the AwesomeButtonProgress is pressed and when the server returns the result the loading becomes false .

I want to be able to call next() based on that variable . I thought of using setTimeout() or something complex and check eery x milliseconds but i want your opinion.

For example :

<AwesomeButton type="primary" style={{ marginRight: '15px' }}>
  <i className="fa fa-close" />
  {'  '}Clear
</AwesomeButton>
<AwesomeButtonProgress
  type="primary"
  resultLabel="Done"
  loadingLabel="..."
  onPress={(element, next) => {
    console.log("What's up bro...")
    this.props.getAllReports()
    setTimeout(() => {
      next()
    }, 600)
  }}
>
  <i className="fa fa-search" />
  {'  '}Search
</AwesomeButtonProgress>

renders the below :

I have use a custom timeout of 600 ms but that was just for example . The server may return the result in 5 seconds . I want the button to remain on loading status until the loading of reducer is false

Programmatically click button

I don't believe this is an issue, I'm just wondering how I can achieve this.
I want to be able to programmatically click the AwesomeButtonProgress. For example, I am using the button on a login page, when the user hits 'Enter' on their keyboard, I want the button to be triggered so that I can utilise the Button's progress animations.

How can I achieve this?
Below is the code from my failed attempt:

At the top of the class/component

private loginButton: React.RefObject<HTMLInputElement>;

constructor(props: any){
    super(props);
    this.loginButton = React.createRef();
    this._handleKeyPress = this._handleKeyPress.bind(this);
}

The input onChange event
_handleKeyPress = (event: any) => { if (event.key === 'Enter') { this.loginButton.current.click(); } }
In the render method
<AwesomeButtonProgress ref={(input: any) => this.loginButton = input} title={"Login"} type="primary" size="medium" action={(element: any, next: any) => this.handleLogin(next)}> Login </AwesomeButtonProgress>

Thanks!

In Firefox buttons are gray.

It works in chrome but not in firefox. I thought something was wrong with me, than I saw this guy.
I am using firefox 70.0.1 (64-bit) in Elementary OS
This is the code, nothing special:
<AwesomeButton onPress={event=> this.tagClick(tagList,event)} cssModule={AwesomeButtonStyles} type="primary" style={{width:"100%",padding:"0"}} > {tagList} </AwesomeButton>

Button overlaying above all other html elements

Hi there,

I'm really happy with the button so far, but have a had a little issue with the button overlaying over modals, autocomplete/select boxes etc. Is there a workaround/fix for this?
If needed I am more than happy to supply a few code samples to show what I mean.

Thanks in advance,
Luke

Add option to add icon in progress button's loading and success state

The component seems very promising. It would be very helpful if we could add icon along side with text in loadingLabel and resultLabel.

UNSAFE_componenewillreceiveProps warning

With the new react update, we are now receiving the folllowing warning:

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: AwesomeButton

Will this be updated?

Height custom style doesn't work

I want to use aws-btn in several places in my Gatsby project but with a different variation in each place.
The default height works fine but whenever I try to change it nothing happens.
Added !important, created another class with a different name but still to no avail.
I should note that I use the large size property on one of the buttons.

Any help would be appreciated.

Doesn't work with typescript?

When using with Typescript:

import { AwesomeButton } from 'react-awesome-button'

I get the following error: Module '"react-awesome-button"' has no exported member 'AwesomeButton'. Did you mean to use 'import AwesomeButton from "react-awesome-button"' instead?ts(2614)

Using the button as a Submit button

Hi
I'm trying to use this really Awesome button to submit a form (I'm using Formik) but I get a warning in the console that it's better to add type = submit but I can't because here the type means something else - the color of the button.

this is the warning:

Warning: You submitted a Formik form using a button with an unspecified type attribute. Most browsers default button elements to type="submit". If this is not a submit button, please add type="button".

Best regards
Avi

Issue : babel transformation (syntax error)

I am sorry, I don't know how to solve this. Please help. Couldn't find help anywhere. Sorry for posting as a issue here.

Progress speed

Can we manage the speed of the progress button to maki it homogeneous ?

onPress not working

import { AwesomeButtonProgress } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'

function Button() {
return (
<AwesomeButtonProgress
cssModule={AwesomeButtonStyles}
type="primary"
onPress={next => {
// do a sync/async task then call next()
console.log("test");
next()
}}
>
Button

);
}

i tried this code that i get from 'AwesomeButtonProgress basic example' docs

Demo does not work!

:(

Warnings in the console

Getting the following warning when running the app

Error When using cssModule

I receive the following error when attempting to use the cssModule prop as I would like to change the height of the button.

I'm using a CSS Pre-processor as per: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

Failed to execute 'remove' on 'DOMTokenList': The token provided must not be empty.
Why might this be happening?

Not supported by IE 11?

I was surprised to see the buttons don't work on the latest version of IE:

The animations don't really work in Edge, but that's to be expected. I'm really confused as to why no styles are displayed in IE.

Module not found: Can't resolve 'prop-types

I use it in CRA(Create-React-APP)，but I get this error Module not found: Can't resolve 'prop-types' in '/Users/a/Downloads/react-awesome-button-master/dist'

Here are my steps:

1. git clone this project
2. run npm i under react-awesome-button-master folder
3. run npm build under react-awesome-button-master folder
4. in a CRA project, import this library
5. run npm i under CRA folder
6. run `npm start under CRA folder
7. got this error message

Broken for TypeScript

When using this component in TS it expects all properties there are to be passed, very inconvenient.

Can not disable an AwesomeButtonProgress

AwesomeButtonProgress have no disabled prop?
I really need this :(

react and prop-types should be peer deps

I don't think there's any need to bundle these two since they would just inflate the bundle size. A react application would already have these two dependencies so they may be picked safely as peer dependencies. I suppose if this sounds good to you it would be a breaking change.

Can't disable button

I am disabling the button in the action

handleSearchClick = (button) => {
console.log('button clicked')
button.disabled=true;
}

However the button is still visible.
In the DOM I can see:
button class="aws-btn aws-btn--facebook aws-btn--visible aws-btn--middle" role="button"

React

Tumblr button type

It may not be as big as it once was, but Tumblr still has a relatively big userbase, standing as the world's 119th most popular site, According to Alexa. I think it deserves its own button type.

AwesomeButtonShare facebook button have glitch

at website AwesomeButtonShare facebook button have glitch when popup window loads

Telegram button

It would be great to have a Telegram share button alongside other social share options.

Any plans?

The demo page is pointing to the React-Native component

In the demo page (https://caferati.me/demo/react-awesome-button) has an error in the installation command. Be pointing to the React-Native component.

Installation
.sh
npm install --save react-native-awesome-button

Should be written
npm install --save react-awesome-button

Disable Sharing in SocialButton

Is there any way to use the Share Button just to navigate to a page without sharing?

TypeError: Super expression must either be null or a function, not undefined

Hi I'm getting below error when I run a page with awesome button on my ubuntu server. The same code works in my local mac. I tried removing awesome button code and everything worked fine.

TypeError: Super expression must either be null or a function, not undefined
at https://bethabit.com/containers-OfferPage.55094d78b16709c57ee7.js:1:7370
at https://bethabit.com/containers-OfferPage.55094d78b16709c57ee7.js:1:7453
i
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:12253
call
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:465
n
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:1419
call
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:465
n
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:6376
call
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:465
n
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:1268
Object.1038
at webpack:///home/ubuntu/bethabit/node_modules/react-awesome-button/dist/index.js:1:1285

I use it as below

import { AwesomeButton } from 'react-awesome-button';
import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss';


   const aButton = () => {
      return (
        <div className="text-center">
          <AwesomeButton
            type="primary"
            className="aws-btn-big"
            onPress={() => {
              this.toggle();
            }}
          >
            Download Your 21 Day Challenge Guide
          </AwesomeButton>
          <div className="padTop5">
            <p className="stock-message">
              Hurry! This Offer Ends <span className="today">Soon!</span>
            </p>
          </div>
        </div>
      );
    };
 <p className="offer_subheadline">{offercontent.intro.subtitle}</p>
  {aButton()}

usage with react-router-dom navLink

I tried using the button with react-router-dom. I have an existing route transition animation in place. I wrapped the button with Link tags in order to redirect to the next page.
<NavLink to="/main"> <AwesomeButton > click to go to next page </AwesomeButton> </NavLink>
this code works but the button shows up a bit longer after the new page is displayed. I guess this is due to the animation for the button to come up.
Is there any way I can use this button for my use case?

react-awesome-button\src\components\AwesomeButton\index.js: Unexpected token (20:24)

Unexpected Token in react-awesome-button\src\components\AwesomeButton\index.js (20:24)

Apart from the babel issue when I try the default primary button as given in the demo website I get,

./node_modules/react-awesome-button/src/components/AwesomeButton/index.js
SyntaxError: C:\Users\Ranveer\Desktop\proramming\projects\react-obj-detect-tfjs\node_modules\react-awesome-button\src\components\AwesomeButton\index.js: Unexpected token (20:24)

18 | */
19 |

20 | const Anchor = props => <a {...props} />;
| ^
21 | const Button = props => <button {...props} />;
22 |
23 | export default class AwesomeButton extends React.Component {

Error : 'Function components cannot be given refs'

Hello :) I'm getting the 'Function components cannot be given refs' error whenever I use AwesomeButton, the button seems fully functional, my React version is 18.2, is there a way to get rid of the error ?

Financing

Hi 👋,

I'm Romuald from the Lsos, an organization that develops financial solutions for open source, and we are currently reaching out to projects we like.

We have several solutions depending on your financial goals and we can help with:

• Increasing donations
• Starting/increasing consulting work for your users
• Earning a living from your open source work
• Remunerating and hiring a small engineering team for your open source projects

For example, we can increase donations with the Lsos Donation Reminder and the Lsos Donation Fund.

We can also leverage a license clause if you are interested in receiving a substantial remuneration from your open source work. Our license clauses are designed to keep code:

1. Accessible: everything stays free for individuals and small companies — only large companies pay a small fee.
2. Open: anyone can fork the code and remove the license clause.

Large companies want two things: open source and a way to pay for software. They prefer paying for well-maintained tools rather than using free but unreliable tools. At the end of the day, a license clause can be a win for everyone.

We are focusing on solving the financials of a handful of projects first to then eventually tackle the open source financing problem at large. Let me know if you are interested.

Rom

AWESOME BUTTON NOT WORKING WITH IONIC

I absolutely love this library. I wanted to try and use it with my ionic app and none of the props on the awesome buttons were working. Yet the buttons would still show and the animations would work. Any thoughts?

EX CODE:
import React from "react";
import { AwesomeButton, AwesomeButtonProgress } from "react-awesome-button";
import "react-awesome-button/dist/styles.css";
import { IonApp, IonButton, IonPage, setupIonicReact } from "@ionic/react";
const App = () => {
setupIonicReact({ mode: "md" });

return (

<IonButton
onClick={() => {
console.log("You clicked the ionic button");
}}
>
Test

<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
}}
>
<AwesomeButton
type="primary"
onPressed={() => {
console.log("Clicked an awesome button");
}}
>
PRIMARY

<AwesomeButtonProgress
type="primary"
onPress={(event: any, release: any) => {
console.log(event.target);
release();
}}
>
ASYC BUTTON



);
};

export default App;