Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-awesome-button
Advanced tools
Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons
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.
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
Checkout the Storybook
at my web portfolio page.
Import it directly into your Figma project.
You can run the storybook locally on 6006
by cloning this repository and running npm run storybook
npm install --save react-awesome-button
import { AwesomeButton } from "react-awesome-button";
import "react-awesome-button/dist/styles.css";
function Button() {
return <AwesomeButton type="primary">Button</AwesomeButton>;
}
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 tagRenders the component with a Button
tag and an onPress prop called on animation release.
Checkout this example live on the storyboard.
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 tagRender the component with an anchor
tag setting the href and target attributes.
Checkout this example live on the storyboard.
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
propsAttribute | 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 exampleCheckout 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={next => {
// do a sync/async task then call `next()`
}}
>
Button
</AwesomeButtonProgress>
);
}
AwesomeButtonProgress
specific propsBeing 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 exampleCheckout this example live on the storyboard.
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 propsBeing 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 |
Checkout the React Native version of the Awesome Button UI Component at rcaferati/react-native-really-awesome-button
MIT. Copyright (c) 2019 Rafael Caferati.
FAQs
Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons
The npm package react-awesome-button receives a total of 1,062 weekly downloads. As such, react-awesome-button popularity was classified as popular.
We found that react-awesome-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.