open-index/open-npm huggingface dataset:
npm package: @mesmotronic/next-adsense
Description: Google AdSense components for Next.js
Author: Neil Rackett
Latest version: 1.0.0

# Google AdSense components for Next.js

This is the simplest possible React components for using Google Adsense with Next.js app router.

## Install

```bash
npm i @mesmotronic/next-adsense
```

## Use

In your `layout.ts` file, add the `GoogleAdSense` component and set `client` to your publisher ID:

```jsx
import { GoogleAdSense } from "@mesmotronic/next-adsense";

...

<GoogleAdSense client="ca-pub-XXXXXXXXXXXXXXXX" />
```

On your pages, you can then add a `GoogleAdUnit` component to wrap the `<ins>` elemenent Google AdSense
creates for you in its code generator, for example:

```jsx
import { GoogleAdUnit } from "@mesmotronic/next-adsense";

...

<GoogleAdUnit>
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"
  ></ins>
<GoogleAdUnit>
```

All ad unit types and sizes are supported.

That's it!
npm package: @mesmotronic/react-observable-div
Description: React component that provides a div element for embedding non-React things into, that tells you when it's mounted, unmounted or resized
Author: Neil Rackett
Latest version: 1.0.4

# ObservableDiv for React

This library provides a React component that creates a `<div>` element for
embedding non-React things into, that dispatches events when it's mounted,
unmounted or resized.

```ts
<ObservableDiv
  onMount={(domElement) => console.log("Mounted", domElement)}
  onUnmount={() => console.log("Unmounted")}
  onResize={({ width, height }) =>
    console.log(`Resized to ${width} x ${height}`)
  }
>
  {/* You can optionally put content here */}
</ObservableDiv>
```

This component provides the ideal host for things like a [Three.js](https://threejs.org)
canvas, for example.

## Strict mode

Please keep in mind that React's `<StrictMode>` may cause this component to
dispatch the mount event twice in development. This is a know issue with
`<StrictMode>` that affects all components and should be managed appropriately.
npm package: @mesmotronic/react-usesetstate
Description: React hooks that mimic class component setState for both immutable UI-driven updates and synchronous logic-driven state management
Author: Neil Rackett
Latest version: 1.1.1

# State hooks for React

A collection of React hooks (`useSetState`, `useSetStateRef`, `useSetStateProxy`) that mimic class component `setState` for immutable UI-driven updates, synchronous logic-driven state, and proxy-based state access.

## Installation

```bash
npm install @mesmotronic/react-usesetstate
```

## Examples

### `useSetState`

Immutable state with re-rendering for UI components.

```tsx
import { useSetState } from '@mesmotronic/react-usesetstate';

interface FormState {
  name: string;
  age: number;
}

function Form() {
  const [state, setState] = useSetState<FormState>({ name: '', age: 0 });

  return (
    <div>
      <input
        value={state.name}
        onChange={(e) => setState({ name: e.target.value })}
      />
      <button onClick={() => setState((prev) => ({ age: prev.age + 1 }))}>
        Increment Age
      </button>
      <p>Name: {state.name}, Age: {state.age}</p>
    </div>
  );
}
```

### `useSetStateRef`

Synchronous state updates without re-rendering for logic.

```tsx
import { useSetStateRef } from '@mesmotronic/react-usesetstate';

interface FormState {
  name: string;
  age: number;
}

function Logic() {
  const [state, setState] = useSetStateRef<FormState>({ name: '', age: 0 });

  const update = () => {
    setState({ name: 'Alice' });
    console.log(state.name); // 'Alice' (instantly)
    state.age = 30; // Direct mutation
    console.log(state.age); // 30
  };

  return <button onClick={update}>Update</button>;
}
```

### `useSetStateProxy`

Proxy-based state access, using `useSetState` or `useSetStateRef`.

```tsx
import { useSetStateProxy, useSetStateRef } from '@mesmotronic/react-usesetstate';

interface FormState {
  name: string;
  age: number;
}

function Form() {
  const state = useSetStateProxy<FormState>({ name: '', age: 0 }); // Defaults to useSetState
  const logicState = useSetStateProxy<FormState>({ name: '', age: 0 }, useSetStateRef);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    state.name = e.target.value; // Updates UI
    logicState.name = e.target.value; // Updates synchronously
    console.log('UI:', state.name, 'Logic:', logicState.name);
  };

  return (
    <div>
      <input type="text" value={state.name} onChange={handleChange} />
      <p>Name: {state.name}</p>
    </div>
  );
}
```

## Licence

BSD 3-Clause