Skip to content

Commit 3cb03e6

Browse files
knowankitknowankit
committed
docs: update readme
1 parent d0ee328 commit 3cb03e6

File tree

5 files changed

+153
-46
lines changed

5 files changed

+153
-46
lines changed

‎README.md‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,58 @@
1-
# react-bubbly-effect-button
1+
# react-bubbly-effect-button
2+
3+
## Intro
4+
5+
<p align="center">
6+
<img width="400" src="https://github.com/knowankit/react-bubbly-effect-button/blob/develop/demo.gif">
7+
</p>
8+
9+
## Install
10+
11+
```bash
12+
npm install react-bubbly-effect-button --save
13+
```
14+
15+
If you prefer yarn then
16+
17+
```bash
18+
yarn react-bubbly-effect-button
19+
```
20+
21+
## Props
22+
23+
| Property | Type | Default | Description
24+
| ----------- | ----------- | ----------- | ----------- |
25+
| text | string | 'Dummy | Button text |
26+
| bgColor | string | #ff2e2e | Button and particle color |
27+
| color | string | white | Button text color |
28+
| onClick | func | null | Callback for on click for the button |
29+
30+
31+
## Usage
32+
33+
Check out the [demo](https://knowankit.github.io/react-bubbly-effect-button/) to see in action
34+
35+
```jsx
36+
import React from 'react'
37+
import ReactBubblyEffectButton from "react-bubbly-effect-button";
38+
39+
const onClick = () => {
40+
console.log('Clicked')
41+
}
42+
43+
const BubblyButton = () => {
44+
return <ReactBubblyEffectButton text="Click here" color='#fff' bgColor='#ff0081' onClick={onClick} />
45+
}
46+
47+
export default BubblyButton;
48+
```
49+
50+
## Info
51+
52+
This module was bootstrapped with [build-react-npm](https://github.com/knowankit/build-react-nom).
53+
54+
## License
55+
56+
MIT © [Ankit Kumar](https://github.com/knowankit)
57+
58+
Support my OSS work by <a href="https://twitter.com/knowankit">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>

‎demo.gif‎

796 KB
Loading

‎example/src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const onClick = () => {
77

88
function App() {
99
return <div className='container'>
10-
<ReactBubblyEffectButton text="Click here" color='#fff' bgColor='#26292c' onClick={onClick} />
10+
<ReactBubblyEffectButton text="Click here" color='#fff' bgColor='#ff0081' onClick={onClick} />
1111
</div>;
1212
}
1313

‎src/index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ import ReactDom from "react-dom";
33
import ReactBubblyEffectButton from "./react-bubbly-effect-button";
44

55
const onClick = () => {
6-
console.log('Clicked')
7-
}
6+
console.log("Clicked");
7+
};
88

9-
ReactDom.render(
10-
<ReactBubblyEffectButton text="Hello World!" color='#fff' bgColor='#26292c' onClick={onClick} />,
11-
document.getElementById("app")
12-
);
9+
ReactDom.render(<ReactBubblyEffectButton />, document.getElementById("app"));

‎src/react-bubbly-effect-button.js‎

Lines changed: 91 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,65 @@
11
import React from "react";
22

3-
const ReactBubblyEffectButton = ({ text, onClick, bgColor, color }) => {
4-
const handleClick = (e) => {
5-
animate(e)
6-
onClick()
7-
}
3+
const ReactBubblyEffectButton = ({
4+
text = "Dummy",
5+
onClick = () => {},
6+
bgColor = "#ff2e2e",
7+
color = "white"
8+
}) => {
9+
const handleClick = e => {
10+
animate(e);
11+
onClick();
12+
};
813

9-
const animate = (e) => {
14+
const animate = e => {
1015
e.preventDefault;
1116

1217
// reset animation
13-
e.target.classList.remove('animate');
14-
15-
e.target.classList.add('animate');
18+
e.target.classList.remove("animate");
19+
20+
e.target.classList.add("animate");
1621

1722
setTimeout(() => {
18-
e.target.classList.remove('animate');
19-
},700);
23+
e.target.classList.remove("animate");
24+
}, 700);
2025

2126
const bubblyButtons = document.getElementsByClassName("bubbly-button");
2227

2328
for (var i = 0; i < bubblyButtons.length; i++) {
24-
bubblyButtons[i].addEventListener('click', animate, false);
29+
bubblyButtons[i].addEventListener("click", animate, false);
2530
}
2631
};
2732

2833
const hexToRGB = (h, opacity) => {
29-
let r = 0, g = 0, b = 0;
34+
let r = 0,
35+
g = 0,
36+
b = 0;
3037

3138
// 3 digits
3239
if (h.length == 4) {
3340
r = "0x" + h[1] + h[1];
3441
g = "0x" + h[2] + h[2];
3542
b = "0x" + h[3] + h[3];
3643

37-
// 6 digits
44+
// 6 digits
3845
} else if (h.length == 7) {
3946
r = "0x" + h[1] + h[2];
4047
g = "0x" + h[3] + h[4];
4148
b = "0x" + h[5] + h[6];
4249
}
43-
44-
return "rgba("+ +r + "," + +g + "," + +b + "," + opacity + ")";
45-
}
50+
51+
return "rgba(" + +r + "," + +g + "," + +b + "," + opacity + ")";
52+
};
4653

4754
return (
4855
<>
49-
<button className='bubbly-button' onClick={handleClick}>{text}</button>
50-
<style jsx='true'>
51-
{
52-
`
56+
<button className="bubbly-button" onClick={handleClick}>
57+
{text}
58+
</button>
59+
<style jsx="true">
60+
{`
5361
.bubbly-button {
54-
font-family: 'Helvetica', 'Arial', sans-serif;
62+
font-family: "Helvetica", "Arial", sans-serif;
5563
display: inline-block;
5664
font-size: 1em;
5765
padding: 1em 2em;
@@ -72,9 +80,10 @@ const ReactBubblyEffectButton = ({ text, onClick, bgColor, color }) => {
7280
outline: 0;
7381
}
7482
75-
.bubbly-button:before, .bubbly-button:after {
83+
.bubbly-button:before,
84+
.bubbly-button:after {
7685
position: absolute;
77-
content: '';
86+
content: "";
7887
display: block;
7988
width: 140%;
8089
height: 100%;
@@ -87,15 +96,54 @@ const ReactBubblyEffectButton = ({ text, onClick, bgColor, color }) => {
8796
.bubbly-button::before {
8897
display: none;
8998
top: -75%;
90-
background-image: radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, transparent 20%, ${bgColor} 20%, transparent 30%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, transparent 10%, ${bgColor} 15%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%);
91-
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
99+
background-image: radial-gradient(
100+
circle,
101+
${bgColor} 20%,
102+
transparent 20%
103+
),
104+
radial-gradient(
105+
circle,
106+
transparent 20%,
107+
${bgColor} 20%,
108+
transparent 30%
109+
),
110+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
111+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
112+
radial-gradient(
113+
circle,
114+
transparent 10%,
115+
${bgColor} 15%,
116+
transparent 20%
117+
),
118+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
119+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
120+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
121+
radial-gradient(circle, ${bgColor} 20%, transparent 20%);
122+
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%,
123+
10% 10%, 15% 15%, 10% 10%, 18% 18%;
92124
}
93125
94126
.bubbly-button::after {
95127
display: none;
96128
bottom: -75%;
97-
background-image: radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, transparent 10%, ${bgColor} 15%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%), radial-gradient(circle, ${bgColor} 20%, transparent 20%);
98-
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
129+
background-image: radial-gradient(
130+
circle,
131+
${bgColor} 20%,
132+
transparent 20%
133+
),
134+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
135+
radial-gradient(
136+
circle,
137+
transparent 10%,
138+
${bgColor} 15%,
139+
transparent 20%
140+
),
141+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
142+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
143+
radial-gradient(circle, ${bgColor} 20%, transparent 20%),
144+
radial-gradient(circle, ${bgColor} 20%, transparent 20%);
145+
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%,
146+
10% 10%, 20% 20%;
99147
}
100148
101149
.bubbly-button:active {
@@ -116,37 +164,42 @@ const ReactBubblyEffectButton = ({ text, onClick, bgColor, color }) => {
116164
117165
@keyframes topBubbles {
118166
0% {
119-
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
167+
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%,
168+
25% 90%, 40% 90%, 55% 90%, 70% 90%;
120169
}
121170
122171
50% {
123-
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
172+
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%,
173+
22% 50%, 50% 50%, 65% 20%, 90% 30%;
124174
}
125175
126176
100% {
127-
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
177+
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%,
178+
22% 40%, 50% 40%, 65% 10%, 90% 20%;
128179
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
129180
}
130181
}
131182
132183
@keyframes bottomBubbles {
133184
0% {
134-
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
185+
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%,
186+
85% -10%, 70% -10%, 70% 0%;
135187
}
136188
137189
50% {
138-
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
190+
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%,
191+
95% 60%, 105% 0%;
139192
}
140193
141194
100% {
142-
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
195+
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%,
196+
95% 70%, 110% 10%;
143197
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
144198
}
145199
}
146-
`
147-
}
148-
</style>
149-
</>
200+
`}
201+
</style>
202+
</>
150203
);
151204
};
152205

0 commit comments

Comments
 (0)