Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
cool-react-floating-button
Advanced tools
cool-react-floating-button - npm Package Compare versions
Comparing version 0.0.8 to 0.0.9
| { | ||
| "name": "cool-react-floating-button", | ||
| "version": "0.0.8", | ||
| "version": "0.0.9", | ||
| "description": "Customizable, animated and modern floating button with multiple options and backdrop", | ||
@@ -5,0 +5,0 @@ "main": "/src/index.js", |
105
README.md
@@ -17,2 +17,3 @@ A lightweight, animated floating button component for React, perfect for modern UI's. Easily customizable with multiple options, backdrop darkening, and Tailwind styling support. | ||
| ``` | ||
| > *Note*: Tailwind CSS should be installed for styling to work. | ||
@@ -33,3 +34,5 @@ ## Usage | ||
| ``` | ||
| ### Use in app | ||
| ```jsx | ||
@@ -40,27 +43,89 @@ import React, { useState } from "react"; | ||
| function App() { | ||
| const [open, setOpen] = useState(false); | ||
| const [floatingBtnOpen, setFloatBtnOpen] = useState(true); | ||
| return ( | ||
| <FloatingButton open={open} setFloatBtnOpen={setOpen}> | ||
| <FloatingButtonIcon> | ||
| <Plus /> | ||
| </FloatingButtonIcon> | ||
| <FloatingButtonOptionContainer> | ||
| <FloatingButtonOption onClick={() => alert("Department clicked!")}> | ||
| <FloatingButtonOptionIcon> | ||
| <User /> | ||
| </FloatingButtonOptionIcon> | ||
| <FloatingButtonOptionLabel>Department</FloatingButtonOptionLabel> | ||
| </FloatingButtonOption> | ||
| <FloatingButtonOption onClick={() => alert("Coordinator clicked!")}> | ||
| <FloatingButtonOptionIcon> | ||
| <User /> | ||
| </FloatingButtonOptionIcon> | ||
| <FloatingButtonOptionLabel>Coordinator</FloatingButtonOptionLabel> | ||
| </FloatingButtonOption> | ||
| </FloatingButtonOptionContainer> | ||
| </FloatingButton> | ||
| <div> | ||
| <FloatingButton | ||
| open={floatingBtnOpen} | ||
| setFloatBtnOpen={setFloatBtnOpen} | ||
| className={"size-16 rounded-full bg-gradient-to-r from-blue-800 to-indigo-900 text-white text-2xl shadow-lg shadow-blue-800"} | ||
| > | ||
| <FloatingButtonIcon ariaLabel="Toggle Floating Button"> | ||
| <Plus /> | ||
| </FloatingButtonIcon> | ||
| <FloatingButtonOptionContainer ariaLabel="Floating Button Options"> | ||
| <FloatingButtonOption | ||
| onClick={() => { | ||
| alert("clicked"); | ||
| setFloatBtnOpen(false); | ||
| }} | ||
| ariaLabel="Department Option" | ||
| > | ||
| <FloatingButtonOptionIcon | ||
| ariaLabel="Department Icon" | ||
| className={"rounded-full shadow-xl bg-gradient-to-r from-blue-600 to-indigo-700 size-10"} | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| className="lucide lucide-house-plus" | ||
| > | ||
| <path d="M13.22 2.416a2 2 0 0 0-2.511.057l-7 5.999A2 2 0 0 0 3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7.354" /> | ||
| <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /> | ||
| <path d="M15 6h6" /> | ||
| <path d="M18 3v6" /> | ||
| </svg> | ||
| </FloatingButtonOptionIcon> | ||
| <FloatingButtonOptionLabel ariaLabel={"Department icon"} className={"text-sm pb-1 text-white bg-blue-800 rounded-full px-2"}> | ||
| Department | ||
| </FloatingButtonOptionLabel> | ||
| </FloatingButtonOption> | ||
| <FloatingButtonOption | ||
| onClick={() => { | ||
| alert("clicked"); | ||
| setFloatBtnOpen(false); | ||
| }} | ||
| ariaLabel="Faculty Option" | ||
| > | ||
| <FloatingButtonOptionIcon | ||
| ariaLabel="Faculty Icon" | ||
| className={"rounded-full shadow-xl bg-gradient-to-r from-blue-600 to-indigo-700 size-10"} | ||
| > | ||
| <UserRound /> | ||
| </FloatingButtonOptionIcon> | ||
| <FloatingButtonOptionLabel ariaLabel={"Faculty icon"} className={"text-sm pb-1 text-white bg-blue-800 rounded-full px-2"}> | ||
| Faculty | ||
| </FloatingButtonOptionLabel> | ||
| </FloatingButtonOption> | ||
| <FloatingButtonOption | ||
| onClick={() => { | ||
| alert("clicked"); | ||
| setFloatBtnOpen(false); | ||
| }} | ||
| ariaLabel="Student Option" | ||
| > | ||
| <FloatingButtonOptionIcon | ||
| ariaLabel="Student Icon" | ||
| className={"rounded-full shadow-xl bg-gradient-to-r from-blue-600 to-indigo-700 size-10"} | ||
| > | ||
| <UserRound /> | ||
| </FloatingButtonOptionIcon> | ||
| <FloatingButtonOptionLabel ariaLabel={"Student icon"} className={"text-sm pb-1 text-white bg-blue-800 rounded-full px-2"}> | ||
| Student | ||
| </FloatingButtonOptionLabel> | ||
| </FloatingButtonOption> | ||
| </FloatingButtonOptionContainer> | ||
| </FloatingButton> | ||
| </div> | ||
| ); | ||
| } | ||
| export default App; | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by14.95%
26503
- Number of lines in readme file
- increased by101.56%
129
No dependency changes