Customized fork of Rainbow's Rainbow-Button
import Fountain from "../components/nounishButton/NounishGlassesPop"
const [animate, setAnimate] = useState<boolean>(false)
useEffect(() => {
new Fountain()
}, [])
const buttonAction = useCallback(async () => {
setAnimate(true)
//do something
}, [])
<button
className="flex items-center justify-center w-full h-full p-2 px-10 text-lg font-semibold text-white rounded-lg bg-[#212529] hover:shadow-xl space-x-2"
disabled={false}
onClick={() => {
buttonAction()
}}
>
nounish
</button>
- To add your own selection of glasses, insert string array of
img
hosted links insideGlasses
const Glasses = {
lostNouns: [...],
lilNouns: [...],
nouns: [...],
// add new array of glasses here
nounishGlasses: [
'<img src="https://i.ibb.co/QbgtdVH/glasses1.png" width="78px" height="45px">',
'<img src="https://i.ibb.co/9cq05Kb/glasses2.png" width="36px" height="21px">',
]
}
- Make sure that
this.variants
points to your newly created ⌐◨–◨ glasses array
constructor() {
...
// ["⌐◨–◨"]
// before this.variants = Glasses.lilNouns
// after
this.variants = Glasses.nounishGlasses
...
}