open-index/open-npm huggingface dataset:
npm package: @rewin/get-random
Description: A simple function to select and return a random value from a list.
Author: rich ewin
Latest version: 1.0.9

# 🎲 getRandom

A tiny, type-safe utility to select a random element from a non-empty array. Useful when you need quick randomness without pulling in a full library like lodash.

## ✨ Features

- ⚡ **Zero-dependency** – Built with native JavaScript.
- 🧠 **Type-safe** – Fully typed with generic support.
- 🚫 **Safe-by-default** – Throws clearly when given an empty array.
- 🧩 **Drop-in utility** – Add to any project with no setup.

## 💡 Why?

Sometimes you just need a random element from a list—without worrying about edge cases or bundling unnecessary extras. getRandom gives you that in one tiny, predictable function.

---

## 📦 Installation

```bash
npm install @rewin/get-random
```

## 🧪 Example Usage

```
import { getRandom } from './utils/getRandom';

const colors = ['red', 'green', 'blue'];

const randomColor = getRandom(colors); // might return 'green'
```

## 🛡️ Gotchas

Will throw an error if you pass an empty array.

Not cryptographically secure — fine for UI randomness, not for security-sensitive applications.

## 🪪 License

MIT — Use freely
npm package: @rewin/hooks
Description: Reusable hooks
Author: rich ewin
Latest version: 1.0.2

# 🪝 @rewin/hooks

A growing collection of lightweight, reusable React hooks for common patterns like debouncing and fetching data.

---

## ✨ Features

- 🧰 **Utility-first** – Designed for real-world needs like debouncing input or delaying effects.
- ⚛️ **React-friendly** – Built with idiomatic patterns and native hooks.
- ⚡ **Lightweight** – No dependencies, small footprint.
- 🧠 **Type-safe** – Written in TypeScript with full generics support.
- 🧩 **Composable** – Use standalone or together as building blocks.

---

## 💡 Why?

Sometimes you just need a small utility hook to make your code cleaner. Instead of rewriting the same logic over and over, `@rewin/hooks` gives you thoughtful, reusable solutions for everyday problems in React.

---

## 📦 Installation

```bash
npm install @rewin/hooks
```

## 📚 Available Hooks

```
- useDebounce<T>(value: T, delay?: number)

Delay a changing value by a set number of milliseconds.

- usePagination(data = [], itemsPerPage = 10, initialPage = 1)

Provides pagination logic for an array of data.
```

## 🛡️ Gotchas

These hooks are intended for use in client-side React (i.e., inside functional components).
Using them in server components or outside of React’s render lifecycle may result in errors.

## 🧱 Built With

- react
- typescript

## 🪪 License

MIT — Use freely and build cool things.
npm package: @rewin/serverx
Description: Creates a server-only context using react’s cache()
Author: rich ewin
Latest version: 1.0.1

# 📦 serverX

A tiny utility for managing server-only, request-scoped context in frameworks like Next.js using `react`’s `cache()` API. Perfect for safely sharing values across server components without prop-drilling or global state.

---

## ✨ Features

- ⚡ **Zero-dependency** – Built on top of native React features.
- 🧠 **Type-safe** – Fully typed with inference support.
- 🚫 **Server-only** – Enforced via `'server-only'` import.
- 🔒 **Safe-by-default** – Throws descriptive errors when accessing unset values.
- 🧩 **Composable** – Create multiple isolated contexts as needed.

## 💡 Why?

React Server Components make it hard to share values without threading them through props. This utility gives you a safe, request-scoped way to manage shared state like feature flags, user identity, or configuration—without lifting everything to the root.

---

## 📦 Installation

```bash
npm install @rewin/serverx
```

## 🧪 Example Usage

Create a typed context

```
// context/index.ts
import { contextFactory } from '@rewin/serverx';

export const [getUserName, setUserName] = contextFactory<string>('username');
```

Set the context in a server file

```
// app/page.tsx or a server action
import { setUserName } from './context';

setUserName('Bob Dylan');
```

Access the context later in the same request

```
// deeper down in a server component
import { getUserName } from './context';

const username = getUserName(); // 'Bob Dylan'
```

## 🛡️ Gotchas

You must call setContext() before calling getContext() during a request.

This only works in server environments. It will throw if used in the client.

Ideal for Next.js App Router or similar server component frameworks.

🧱 Built With

`react/cache`

## 🪪 License

MIT — Use freely
npm package: @rewin/statex
Description: Creates a client store using react’s useSyncExternalStore()
Author: rich ewin
Latest version: 1.0.8

# 📦 stateX

A minimalist, type-safe utility for building external state containers in React using `useSyncExternalStore`. Perfect for creating global stores without context, Redux, or extra dependencies.

---

## ✨ Features

- ⚡ **Zero-dependency** – Built on top of native React features.
- 🔁 External Store – Uses React's built-in useSyncExternalStore.
- 🧠 Type-safe – Fully typed state and actions with inference.
- 🛠️ Custom Actions – Define your own mutations with direct access to state.
- 🎯 Fine-grained Selectors – Subscribe to just the data you need.

## 💡 Why?

React doesn't come with a built-in way to manage global state outside of Context or heavy libraries like Redux. statex gives you an intuitive, lightweight tool to create composable, reactive stores—ideal for app-wide settings, UI state, or anything that lives outside of a component tree.

---

## 📦 Installation

```bash
npm install @rewin/statex
```

## 🧪 Example Usage

Initialize the counter state, define actions, create the store, and export hooks/utilities.

```
'use client'

import { createStore, createUseStore } from '@rewin/statex';

type State = {
  count: number;
};

const initialState: State = { count: 0 };

const counterStore = createStore(
    initialState,
    ({ getState, setState }) => ({
        increment: () => {
            const { count } = getState();
            setState({ count: count + 1 });
        },
        decrement: () => {
            const { count } = getState();
            setState({count: count - 1})
        },
        reset: () => setState({ count: 0 })
    }),
  );

export const useCounter = createUseStore(counterStore);

export const { getState, increment, reset } = counterStore;
```

Import and use counter actions in a client-side component.

```
"use client"

import {  increment, reset, useCounter } from "./store/counter.store";

export default function ClientComponent3() {
    const { count } = useCounter()

    return (
      <div>
        <button onClick={increment}>+</button>
        <button onClick={reset}>Reset</button>
        <p>{count}</p>
      </div>
    );
}
```

## 🛡️ Gotchas

This is not persistent—state resets on refresh unless you wire in localStorage or similar.

Designed for client-side usage.

🧱 Built With

`react/cache`

## 🪪 License

MIT — Use freely