react-awesome-button is a performant, extendable, highly customisable, production ready React Component that renders an animated set of 3D UI buttons.

Overview

React UI Component

Travis NPM

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.

react-awesome-button demo

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 my web portfolio page.

You can run this demo locally on 8080 by cloning this repository and running npm start

Storybook

Checkout the Storybook at my web portfolio page.

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

Button; } ">
import { AwesomeButton } from "react-awesome-button";
import "react-awesome-button/dist/styles.css";

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

CSS Modules

Button ); } ">
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 tag and an onPress prop called on animation release. Checkout this example live on the storyboard.

{ // do something }} > Button ); } ">
import { AwesomeButton } from "react-awesome-button";
import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";

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

AwesomeButton rendered with an anchor tag

Render the component with an anchor tag setting the href and target attributes.

Checkout this example live on the storyboard.

Button ); } ">
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"
      target="_blank"
    >
      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 Should render a disabled button
visible bool true Should the button be visible
ripple bool false Should render the animated ripple effect
onPress function null Default click/press function
href string null Forces the button to be rendered on an anchor container and sets the href to the specified value
target string null When used together with href renders an anchor with a specific target attribute

AwesomeButtonProgress basic example

Checkout this example live on the storyboard.

{ // do a sync/async task then call `next()` }} > Button ); } ">
  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()`
        }}
      >
        Button
      </AwesomeButtonProgress>
    );
  }

AwesomeButtonProgress specific props

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

Attribute Type Default Description
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
fakePress boolean false When set to true triggers a fake button press

AwesomeButtonSocial basic example

Checkout this example live on the storyboard.

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

  function Button() {
    return (
      <AwesomeButtonSocial
        cssModule={AwesomeButtonStyles}
        type="facebook"
        url="https://caferati.me"
      >
        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 primary Render a specific button type. Bundled with Facebook, Instagram, Twitter, Github, Youtube, Linkedin, Pinterest, Reddit, Messenger, Whatsapp and Google Plus (RIP) types and share methods
icon bool false Should render the social icon relative to the button type
iconHeight number 23 Rendered icon height
icon number 30 Rendered icon width
url string null Url string to be used on the sharer
image string null Image url to be rendered on the sharer
message string null Message string to be rendered on the share post
phone string null Phone number to be used when using the Whatsapp sharer
user string null Username to be redirected to when using the Messenger sharer

React Native Version

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

Author

Rafael Caferati

License

MIT. Copyright (c) 2019 Rafael Caferati.

Comments
  • 6.1.0 All button hover effects seem to be malfunctioning

    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.

    opened by bchehraz 4
  • In Firefox buttons are gray.

    In Firefox buttons are gray.

    Screenshot from 2020-01-08 04 37 54

    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>

    opened by FurkanTheHuman 2
  • Can't disable button

    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"

    opened by johneakin 2
  • Programmatically click button

    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!

    opened by kmarkiewicz 2
  • How to Call Error on AwesomeButtonProgress

    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?

    opened by njho 2
  • Theme styles required?

    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';
    
    opened by smitch88 2
  • Bump css-what from 2.1.0 to 2.1.3

    Bump css-what from 2.1.0 to 2.1.3

    Bumps css-what from 2.1.0 to 2.1.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump terser from 4.3.9 to 4.8.1

    Bump terser from 4.3.9 to 4.8.1

    Bumps terser from 4.3.9 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump moment from 2.22.2 to 2.29.4

    Bump moment from 2.22.2 to 2.29.4

    Bumps moment from 2.22.2 to 2.29.4.

    Changelog

    Sourced from moment's changelog.

    2.29.4

    • Release Jul 6, 2022
      • #6015 [bugfix] Fix ReDoS in preprocessRFC2822 regex

    2.29.3 Full changelog

    • Release Apr 17, 2022
      • #5995 [bugfix] Remove const usage
      • #5990 misc: fix advisory link

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/moment/moment/security/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump moment from 2.22.2 to 2.29.2

    Bump moment from 2.22.2 to 2.29.2

    Bumps moment from 2.22.2 to 2.29.2.

    Changelog

    Sourced from moment's changelog.

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    TypeScript fixes and many locale improvements

    2.25.3

    • Release May 4, 2020

    Remove package.json module property. It looks like webpack behaves differently for modules loaded via module vs jsnext:main.

    2.25.2

    • Release May 4, 2020

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump lodash-es from 4.17.10 to 4.17.21

    Bump lodash-es from 4.17.10 to 4.17.21

    Bumps lodash-es from 4.17.10 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash-es since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • AWESOME BUTTON NOT WORKING WITH IONIC

    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;

    opened by NateWalchenbach 0
  • Ripple effect is not working on touch device

    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.

    opened by zeitderforschung 0
  • Bump loader-utils from 1.4.0 to 1.4.2

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Releases(v7.0.1)
    Owner
    Rafael Caferati
    UI/UX developer specialist. React, React Native consultant.
    Rafael Caferati
    React project - fetching questions and answers based on a set-up form

    HTML CSS & React - Quiz fetched from API based on set-up form

    Almog Wertzberger 1 Oct 9, 2022
    Set of enhancements for react input control

    This project was originally thought to be an experiment and currently is unmaintained (and buggy) Use it at your own risk react-input-enhancements Set

    Alexander Kuznetsov 1.4k Nov 18, 2022
    React Redux Multi-Step Signup Form. Created with React, Redux Toolkit, and SASS. Plus React Lazy Load for Component loading.

    React Redux Multi-Step Signup Form. Created with React, Redux Toolkit, and SASS. Plus React Lazy Load for Component loading.

    Rishi Singh Bhachu 16 Nov 9, 2022
    Simple 'click to edit' editable text component for React

    Simple 'click to edit' editable text component for React

    Brian Min 35 Nov 19, 2022
    📟 React component for entering PIN codes.

    ?? React component for entering PIN codes.

    Clément DOUIN 334 Nov 28, 2022
    A multi-step form component library built with React and styled with Emotion

    React Emotion Multi-step Form A multi-step form component library built with React and styled with Emotion Introduction A declarative component librar

    Zheng Lai 28 Sep 3, 2022
    React component for boolean values

    react-input-checkbox Checkbox is React component for boolean values. Tiny: 957 bytes minified and gzipped (by Size Limit); Easy customize: themes and

    Pavel (Paul) Popov 5 Sep 14, 2022
    A react component for form inputs validation

    react-inputs-validation A react component for form inputs validation. Online demo examples. How to use Usage Live examples Codesandbox examples Basic

    Edward Xiao 47 Oct 4, 2022
    One Time Password Component Package for Chakra UI

    One Time Password Component Package for Chakra UI

    Sammy Fattah 6 Aug 2, 2022
    It is a very tiny component which is a replacement of HTML input element for post-editing format of number values. ex. 1000000 -> 1,000,000

    react-numeral-input It is a very tiny component which is a replacement of HTML input element for post-editing format of number values. ex. 1000000 ->

    Bingo Yang 11 Jan 28, 2019
    React-Auth - React authentication app flexible to link it to any external authentication source

    React authentication app flexible to link it to any external authentication sour

    null 4 Aug 5, 2022
    Reactjs-forms: a React package that contains a few React components and hook system

    reactjs-forms is a React package that contains a few React components and hook system. The components are almost the same as React syntactic form elements.So you may use all attributes which you can use them on syntactic form elements.

    Ceyhun Yucel 11 Aug 18, 2022
    Simple-as-possible React form validation

    Simple-as-possible React form validation

    Zach Silveira 281 Nov 11, 2022
    react-hook-form is an awsome library which provide a neat solution for building forms.

    react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for the API which may be missed by the developer. This plugin aims to check those rules automatically thourgh ESLint. Thus brings better DX for react-hook-form.

    Chuan-Tse Kao 37 Nov 22, 2022
    JSXFields is a library for creating form field elements in React with a function call instead of writing raw JSX.

    JSXFields is a library for creating form field elements in React with a function call instead of writing raw JSX. This is useful in a setting where you want to generate forms dynamically according to user input such as with a form building application like Wufoo.

    Kagen Hearn 13 Jun 16, 2022
    Formst is a model-driven library for quickly building high-performance forms in React.

    Formst is a model-driven library for quickly building high-performance forms in React. Unlike most form libraries that are UI-First, Formst is Data-First.

    null 92 Jun 8, 2022
    React Dropzone Multiple Files Upload example with axios & Rest API, Bootstrap Progress Bar

    React Dropzone Multiple Files Upload example with axios & Rest API, Bootstrap Progress Bar

    null 10 Nov 24, 2022
    An experimental way to translate text inside React components with context

    An experimental way to translate text inside React components with context

    Alistair Smith 13 Sep 9, 2022
    React Feature Flag Hooks and wrapper

    React Feature Flag Hooks and wrapper

    Badal Mishra JS 5 Feb 4, 2022