New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@colidy/hooks

Package Overview
Dependencies
Maintainers
0
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@colidy/hooks - npm Package Compare versions

Comparing version 0.0.4 to 0.0.6

useTableOfContents.d.ts

1

index.d.ts

@@ -16,1 +16,2 @@ export * from './useDarkMode';

export * from './useKeyPress';
export * from './useViewport';

@@ -32,1 +32,2 @@ "use strict";

__exportStar(require("./useKeyPress"), exports);
__exportStar(require("./useViewport"), exports);

2

package.json
{
"name": "@colidy/hooks",
"version": "0.0.4",
"version": "0.0.6",
"description": "This library provides a collection of custom React hooks to simplify various tasks, including form management, state management, and other utilities. Each hook is designed to be reusable and easy to integrate into your React projects.",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

@@ -25,2 +25,3 @@ # @colidy/hooks

- [useFocus](#usefocus)
- [useTableOfContents](#useTableOfContents)
3. [Contributing](#contributing)

@@ -375,2 +376,45 @@ 4. [License](#license)

### 17. `useTableOfContents`
A hook to programmatically set focus on an element.
#### Usage:
```typescript
import React from 'react';
import { useTableOfContents } from '@colidy/hooks/useTableOfContents';
interface TOCItem {
id: string;
level: number;
title: string;
}
const TocComponent: React.FC = () => {
const { contents, active } = useTableOfContents(['h2', 'h3', 'h4'], '[data-toc]');
return (
<div>
<div data-toc>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<ul>
{contents.map(({ id, level, text }) => (
<li key={id} style={{ marginLeft: \`\${level - 2}em\` }}>
{\`Title: \${text}, Level: \${level}, Id: \${id}\`}
</li>
))}
</ul>
</div>
);
};
export default TocComponent;
```
## Contributing

@@ -377,0 +421,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc