react-performify
Advanced tools
+1
-1
| { | ||
| "name": "react-performify", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "author": { |
+41
-13
@@ -67,18 +67,46 @@ # β‘ React Performify | ||
| ```bash | ||
| import React from "react"; | ||
| import { useToggle } from "react-performify"; | ||
| import React, { useState } from "react"; | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { usePerformanceOverlay } from "../usePerformanceOverlay"; | ||
| export const Example = () => { | ||
| const [isOpen, toggle] = useToggle(false); | ||
| const PerfOverlayDemo = () => { | ||
| const [enabled, setEnabled] = useState(true); | ||
| usePerformanceOverlay(enabled, 500, "bottom-left"); | ||
| return ( | ||
| <div> | ||
| <button onClick={toggle}> | ||
| {isOpen ? "Hide" : "Show"} Details | ||
| </button> | ||
| return ( | ||
| <div style={{ padding: "20px" }}> | ||
| <h3>usePerformanceOverlay Hook Demo</h3> | ||
| <p> | ||
| Toggle the overlay below. When enabled, an FPS counter appears | ||
| on the bottom-left corner of your screen. | ||
| </p> | ||
| <button | ||
| onClick={() => setEnabled(!enabled)} | ||
| style={{ | ||
| background: enabled ? "#d33" : "#3d3", | ||
| color: "white", | ||
| border: "none", | ||
| padding: "10px 16px", | ||
| borderRadius: "6px", | ||
| cursor: "pointer", | ||
| }} | ||
| > | ||
| {enabled ? "Disable Overlay" : "Enable Overlay"} | ||
| </button> | ||
| </div> | ||
| ); | ||
| }; | ||
| {isOpen && <p>Here are the details...</p>} | ||
| </div> | ||
| ); | ||
| const meta: Meta<typeof PerfOverlayDemo> = { | ||
| title: "Hooks/usePerformanceOverlay", | ||
| component: PerfOverlayDemo, | ||
| }; | ||
| export default meta; | ||
| type Story = StoryObj<typeof PerfOverlayDemo>; | ||
| export const Default: Story = { | ||
| render: () => <PerfOverlayDemo />, | ||
| }; | ||
| ``` | ||
@@ -139,3 +167,3 @@ | ||
| React Hookstack β maintained by passionate open-source developers who believe in clean, reusable React logic | ||
| React Performify β maintained by passionate open-source developers who believe in clean, reusable React logic | ||
@@ -142,0 +170,0 @@ ## β Support |
145722
0.7%185
17.83%