A floating button showcasing the capabilities of Walrus!
npm install walrus-info-floating-buttonThis package provides a floating information button designed specifically for Walrus and Walrus Sites. It allows seamless integration into any React app related to Walrus, helping to showcase the capabilities of Walrus and Walrus Sites to the community.
- Displays an information popup about Walrus and Walrus Sites.
To install the package in your React project, run:
``sh`
npm install walrus-info-floating-button
Inside your React app, import the FloatingButton component:
`tsx
import { FloatingButton } from "walrus-info-floating-button";
import "walrus-info-floating-button/src/styles.css"; // Import required CSS
function App() {
return (
/>
);
}
export default App;
`
You can pass your own Walrus site details to the first card of the info popup using these props:
| Prop | Type | Description |
| ---------- | ------- | -------------------------------------- |
| darkMode | boolean | The variable handling your site theme. |
Example:
`tsx`
/>
Ensure that you import the CSS file for proper styling:
`tsx``
import "walrus-info-floating-button/src/styles.css";
- Promotes Walrus and Walrus Sites to the community.
- Provides an easy way for users to learn more about Walrus.
---
Now, you can effortlessly integrate the Floating Information Button into any Walrus-related React app! š
For any questions or contributions, feel free to reach out.
---
š License: MIT
š Author: Dio Lougaris
š Org: Mysten Labs