open-index/open-npm huggingface dataset:
npm package: @girardmedia/altohost-react
Description: React hooks for AltoHost real-time WebSocket infrastructure
Author: AltoHost
Latest version: 1.2.1

# altohost-react

Official React hooks for [AltoHost](https://www.altohost.com) real-time WebSocket infrastructure.

## Install

```bash
npm install @girardmedia/altohost-react @girardmedia/altohost-js
```

## Quick Start

```tsx
import { AltoHostProvider, useChannel, useEvent } from '@girardmedia/altohost-react'

function App() {
  return (
    <AltoHostProvider
      appKey="your-app-key"
      options={{ wsHost: 'ws.altohost.com' }}
    >
      <Chat />
    </AltoHostProvider>
  )
}

function Chat() {
  const [messages, setMessages] = useState([])
  const channel = useChannel('chat-room')

  useEvent(channel, 'new-message', (data) => {
    setMessages((prev) => [...prev, data])
  })

  return <div>{messages.map((m) => <p key={m.id}>{m.text}</p>)}</div>
}
```

## Hooks

### `useAltoHost()`

Access the AltoHost client instance and connection state.

```tsx
const { client, connectionState, socketId } = useAltoHost()
// connectionState: 'connecting' | 'connected' | 'disconnected' | 'reconnecting'
```

### `useChannel(name)`

Subscribe to a channel. Automatically unsubscribes on unmount.

```tsx
const channel = useChannel('my-channel')
// Returns null until subscribed
```

### `useEvent(channel, event, callback)`

Listen for events on a channel. Callback ref is stable — no stale closures.

```tsx
const channel = useChannel('notifications')
useEvent(channel, 'new-alert', (data) => {
  showAlert(data.message)
})
```

### `usePresence(name)`

Subscribe to a presence channel and track members.

```tsx
const { members, me, count, channel } = usePresence('lobby')
// members: [{ id, info }, ...]
// me: { id, info } | null
// count: number
```

### `useTrigger(channel)`

Send client events on a private/presence channel.

```tsx
const channel = useChannel('private-chat')
const trigger = useTrigger(channel)

trigger('typing', { userId: '123', isTyping: true })
// Sends 'client-typing' event
```

## License

MIT
npm package: @giraud/react-toggle-button
Description: Go here: https://gdowens.github.io/react-toggle-button/
Latest version: 2.3.0

# react-toggle-button

### Getting Started

#### Step 1

Go here: https://gdowens.github.io/react-toggle-button/

#### Step 2

![Laughing Gandalf GIF](https://media.giphy.com/media/TcdpZwYDPlWXC/giphy.gif)

### Credits

Inspired by and loosely based on https://github.com/instructure-react/react-toggle
npm package: @giraud/rescript-react-diagram
Description: Easy to use automatic diagram layout component in react
Author: Hervé Giraud
Latest version: 2.0.0

# Rescript React Diagram

Easy to use automatic diagram layout component in react.

![screenshot](screenshot.png)

## Goals

I'm just playing with react-reconciler (as a learning exercise) and an automatic diagram layout algo 
(currently using [dagre](https://github.com/dagrejs/dagre), it might change later since it is deprecated).

- minimal dependencies
- nodes are plain html dom nodes (limit svg to lines)
- using react-reconciler, try to produce very readable DOM nodes
- no styling
- full rescript (_except impossible constructs, like uppercase variables_)

# Setup

clone this project, then:

```
npm install
npm run build
npm run dev 
```

Simple application demo can be found in the `example` folder.

# Usage

## Minimal code

```rescript
@react.component
let make = () =>
  <Diagram width="300px" height="300px">
    <Diagram.Node key="n1" nodeId="n1"> {"Node 1"->React.string} </Diagram.Node>
    <Diagram.Node key="n2" nodeId="n2"> {"Node 2"->React.string} </Diagram.Node>
    <Diagram.Edge key="n1-n2" source="n1" target="n2" label="edge" />
  </Diagram>
```

Note: you need to provide your own css styling.

## Dynamic layout

A more complex code sample that uses dynamic items:

```rescript

let sample = "1|2|3||1-2|1-3"

let parse = instructions => {
  instructions
  ->Js.String2.split("|")
  ->Belt.Array.keep(line => line->Js.String2.length > 0)
  ->Belt.Array.reduce(([], []), ((nodes, edges) as acc, line) => {
    switch line->Js.String2.split("-") {
    | [node] => (nodes->Belt.Array.concat([node]), edges)
    | [source, target] => (nodes, edges->Belt.Array.concat([(source, target)]))
    | _ => acc
    }
  })
}

let renderArray = (a, fn) => a->Belt.Array.map(fn)->React.array

module App = {
  @react.component
  let make = () => {
    let (nodes, edges) = parse(sample)

    <Diagram className="diagram" width="300px" height="300px">
      {nodes->renderArray(nodeId =>
        <Diagram.Node key={nodeId} nodeId={nodeId}>
          {("Node " ++ nodeId)->React.string}
        </Diagram.Node>
      )}
      {edges->renderArray(((source, target)) =>
        <Diagram.Edge key={source ++ "-" ++ target} source target label="edge" />
      )}
    </Diagram>
  }
}
```

# Links

- https://github.com/facebook/react/tree/main/packages/react-reconciler
- https://github.com/chentsulin/awesome-react-renderer
npm package: @giraugh/tools
Description: Generic typescript utilities built with simplicity in mind
Author: Ewan Breakey
Latest version: 2.3.1

# 🦒 Giraugh Tools

[![npm version](https://img.shields.io/npm/v/@giraugh/tools)](https://www.npmjs.com/package/@giraugh/tools)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@giraugh/tools)](https://bundlephobia.com/package/@giraugh/tools)

Generic typescript utilities built with simplicity in mind.

## Installation

**Yarn**

```bash
yarn add @giraugh/tools
```

**PNPM**

```bash
pnpm add @giraugh/tools
```

**NPM**

```bash
npm install @giraugh/tools
```

## Usage

```ts
import { pluralize } from '@giraugh/tools'

pluralize('cake', 2) === 'cakes'
```

## Documentation

**[📄 Visit documentation](https://giraugh-tools-docs.vercel.app)**

Docs are auto generated based on TSDoc comments. See the full API docs above for a list of tools and constants you can use.

## Development

If you find an issue or want to request a feature, please [create an issue](https://github.com/giraugh/tools/issues/new/choose).

Refer to the [Contributing Guide](./CONTRIBUTING.md) for details on local development and contributing to this project.

## License

`@giraugh/tools` is licensed under MIT