New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details β†’
Socket
Book a DemoSign in
Socket

react-performify

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-performify - npm Package Compare versions

Comparing version
0.0.1
to
0.0.2
+1
-1
package.json
{
"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