open-index/open-npm huggingface dataset:
npm package: @shubhaemk/use-element-resize
Description: A custom hook to handle a HTML element or window resize
Author: Shubham Kamath
Latest version: 1.1.2

# use-element-resize

A small hook to check dimension of a DOM ELement or Window when a browser window is resized.

## Playground :running:

Coming Soon!

## Install :floppy_disk:

Using `npm`

```bash
$ npm install @shubhaemk/use-element-resize
```

Using `yarn`

```bash
$ yarn add @shubhaemk/use-element-resize
```

## Features :white_check_mark:

- Get Height and Width of a DOM Element when browser window is resized.
- Execute a function when browser window is resized. (Do not use it to set Height and Width of element in state, use useEffect hook instead till it gets option to be throttled)
- Server Side Rendering support. (Needs to be tested)
- Throttling of Callback function. (Comming Soon!)

## Usage :fire:

```js
const [height, width] = useElementResize(ref, callback);
```

- `height` (Default: undefined): Height of given Element reference or window in `px`, `undefined` till Element is completely painted.
- `width` (Default: undefined): Width if given Element reference or window in `px`, `undefined` till Element is completely painted.
- `ref` (Default: window): Ref of element to whose height and width are required after window resize.
- `callback`: Callback function to be executed after each window resize. (Throttling comming soon)

## Example :computer:

```jsx harmony
import { useRef } from "react";
import useElementResize from "use-element-resize";

const ElementSizeExample = () => {
  const ElementRef = useRef();

  // height and width of browser window
  const [windowHeight, windowWidth] = useElementResize();

  // height and width of browser window with execution of a callback
  const [windowHeightCallback, windowWidthCallback] = useElementResize(
    null,
    () => {
      console.log("Browser Window is getting resized");
    }
  );

  // height and width of DOM Element reffered by ElementRef
  const [elementHeight, elementWidth] = useElementResize(ElementRef);

  // height and width of DOM Element reffered by ElementRef with execution of a callback
  const [elementHeightCallback, elementWidthCallback] = useElementResize(
    ElementRef,
    () => {
      console.log("Element is getting resized");
    }
  );

  return <div style={{ width: "100%", height: "50px" }} ref={ElementRef}></div>;
};
```

## Features Comming soon :eyes:

- Throttling of callback function.
- TypeScript implementation :white_check_mark:

## Referrences :memo:

- [useWindowResize](https://github.com/beautifulinteractions/beautiful-react-hooks/blob/master/docs/useWindowResize.md)
- [useLayoutEffect for SSR](https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a)

[Like it? Give this repo a :star:](https://github.com/shubhaemk/use-element-resize)
npm package: @shubham-rocko/fin-chart
Description: simple chart for angular 2+
Author: Shubham Singh
Latest version: 1.0.0

# fin-chart

simple svg chart with finChart

**It's still in active developement**

### Installation

`npm i combo-chart`
`npm install --save snapsvg`
`npm install --save @types/snapsvg`

you need to import `SVGFinChartModule`.

```
  import { NgModule } from '@angular/core';
  import { SVGFinChartModule } from 'fin-chart/fin-chart';
  import { AppComponent } from './app.component';

  @NgModule({
    declarations: [AppComponent],
    imports: [SVGFinChartModule],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
```

### Getting started

Using fin-chart by component.
_app.component.html_:

```html
<fin-chart [width]="width" [height]="height" [chartDataSource]="dataSource"></fin-chart>
```

_app.component.ts_:

```typescript
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public width = 640;
  public height = 400;
  public dataSource = {
    chart: {
      caption: "", //development phase
      theme: "" //development phase
    },
    data: [
      { label: "Views", value: "10" },
      {
        label: "Automation Starts",
        value: "8"
      },
      {
        label: "Completions",
        value: "6"
      },
      { label: "Leads", value: "4" }
    ]
  };
}
```
npm package: @shubham0x13/ffbeast-wheel-webhid-api
Description: WebHID based API for FFBeast Wheel
Author: Shubham Patel
Latest version: 0.1.1

# FFBeast Wheel WebHID API

A TypeScript WebHID-based API for communicating with [FFBeast](https://ffbeast.github.io/) force feedback wheel controllers directly from the browser.

This library is a TypeScript rewrite of the original C/C++ API, adapted to use the [WebHID API](https://developer.mozilla.org/en-US/docs/Web/API/WebHID_API) for browser-based applications. The original C/C++ source code is available in the [`reference_cpp`](https://github.com/shubham0x13/ffbeast-wheel-webhid-api/tree/main/reference_cpp) directory for reference.

> **Note:** This API includes additional helper methods and properties not present in the original C/C++ implementation, such as `readAllSettings()`, `positionDegrees`, `torqueNormalized`, and more for convenience.

## Features

- 🎮 **Direct wheel communication** via WebHID (no drivers or native apps required)
- 📊 **Real-time device state** - position, torque, firmware version
- ⚙️ **Full settings control** - effect settings, hardware settings, GPIO, ADC configurations
- 🔧 **Direct force feedback control** - spring, constant, and periodic forces
- 📡 **Event-driven architecture** - subscribe to device state changes
- 🔒 **Type-safe** - full TypeScript support with comprehensive types

## Documentation

📚 **[Full API Documentation](https://shubham0x13.github.io/ffbeast-wheel-webhid-api/)**

## Browser Support

> **Note:** Supported in all modern Chromium-based browsers (e.g., Chrome, Edge, Opera, Brave, etc).

| Browser        | Supported |
| -------------- | --------- |
| Chromium-based | ✅        |
| Firefox        | ❌        |
| Safari         | ❌        |

## Installation

```bash
npm i @shubham0x13/ffbeast-wheel-webhid-api
```

## Quick Start

```typescript
import { WheelApi } from "@shubham0x13/ffbeast-wheel-webhid-api";

const wheel = new WheelApi();

wheel.on("stateReceived", (state) => {
  console.log("Position:", state.positionDegrees);
  console.log("Torque:", state.torqueNormalized);
});

wheel.on("deviceConnected", (device) => {
  console.log("Connected to:", device.productName);
});

// Connect to the wheel (opens browser device picker)
await wheel.connect();

// Cleanup when done
await wheel.disconnect();
wheel.destroy();
```

## Requirements

- Node.js >= 20.19.0
- A Chromium-based browser with WebHID support
- An FFBeast wheel controller

## License

This project is licensed under the [MIT License](./LICENSE)