open-index/open-npm huggingface dataset:
npm package: @mdcorp/react-stepper
Description: Made with create-react-library
Author: omarsaidi
Latest version: 1.0.0

# react-stepper

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/react-stepper.svg)](https://www.npmjs.com/package/react-stepper) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-stepper
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from 'react-stepper'
import 'react-stepper/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [omarsaidi](https://github.com/omarsaidi)
npm package: @mdcrty/bees
Description: A performant, canvas-based animated bee swarm for React. Designed as a decorative background effect with full-page support, cross-browser fixes, and configurable layering.
Latest version: 0.1.2

# @mdcrty/bees 🐝

A performant, canvas-based animated bee swarm for React.

`@mdcrty/bees` renders a decorative, full-page bee animation using the HTML canvas.  
It is designed for use as a background or ambient visual effect and includes
cross-browser fixes, configurable layering, and sensible defaults for modern React apps.

---

## Features

- 🐝 Animated bee swarm rendered on canvas
- ⚡ Optimised for performance (requestAnimationFrame, idle handling)
- 🧠 Cross-browser fixes (Chrome / Safari / Windows quirks handled)
- 🧩 Works anywhere in the React tree
- 🎚 Configurable density, timing, and animation behaviour
- 🧱 Adjustable `zIndex` for flexible layering
- 🧼 No UI framework dependencies

---

## Installation

```bash
npm install @mdcrty/bees
```

## Peer dependencies:
- react >= 18
- react-dom >= 18

## Basic Usage

```tsx
import { Bees } from "@mdcrty/bees";

export default function Page() {
  return <Bees />;
}
```

By default, the animation will start immediately and run as a decorative background.

## Props
```ts
type BeesProps = {
  playAnimation?: boolean;
  pause?: boolean;
  fps?: number;
  beeSize?: number;
  beeDensityRatio?: number;
  targetHoneycombCoverage?: number;
  idleDelaySec?: number;
  clusterRampStartSec?: number;
  clusterRampStepSec?: number;
  zIndex?: number;
};
```

### Notable Props
#### zIndex
Controls how the canvas layers relative to other content.
```tsx
<Bees zIndex={0} />      // blended with page elements
<Bees zIndex={1} />      // neutral (default)
<Bees zIndex={-1} />     // background
<Bees zIndex={1000} />   // overlay
```

#### idleDelaySec
Delay (in seconds) before the animation starts or returns after x button press.

```tsx
<Bees idleDelaySec={30} />
```

## Notes on Rendering
- The animation uses a full-document canvas internally.
- Canvas sizing includes defensive fixes for browser scrollbar and sub-pixel rounding issues.
- A small 1px width adjustment is applied intentionally to prevent horizontal overflow on Chrome on Windows.

These behaviours are deliberate and tested across environments.

## License
MIT © mdcrty

## Links
- GitHub: https://github.com/mdcrty/mdcrty-packages
- npm: https://www.npmjs.com/package/@mdcrty/bees
npm package: @mdcrty/digital-rain
Description: React digital rain (Matrix-style) canvas component with command console and source-code toggle.
Latest version: 0.1.2

# @mdcrty/digital-rain

A React-powered Matrix-style digital rain effect with:

- High-performance canvas animation
- Interactive console commands (run, quit, sauce, etc.)
- Optional fixed/static messages appearing inside the rain
- A framework-agnostic SourceCodeProvider for toggling your own source-code viewer

Perfect for portfolio sites, Easter eggs, hacker aesthetics, or interactive visuals.

---

## Installation

npm install @mdcrty/digital-rain

During development (local linking), you can use:

```jsonc
{
  "dependencies": {
    "@mdcrty/digital-rain": "file:../mdcrty-packages/packages/digital-rain"
  }
}
```

## Usage

```tsx
"use client";

import { DigitalRain } from "@mdcrty/digital-rain";

export default function DigitalRainPage() {
  return (
    <DigitalRain staticMessages={["WELCOME", "TO THE DESERT", "OF THE REAL"]} />
  );
}
```

With hidden text, only reavealed with source code

```tsx
"use client";

import {
  DigitalRain,
  SourceCodeProvider,
  useSourceCode,
} from "@mdcrty/digital-rain";

export default function DigitalRainPage() {
  const { isVisible } = useSourceCode();
  return (
    <SourceCodeProvider>
      <DigitalRain
        staticMessages={["WELCOME", "TO THE DESERT", "OF THE REAL"]}
      />
      {isVisible && <div>Source Code</div>}
    </SourceCodeProvider>
  );
}
```

## Console Commands

Press ~ to open the mini console.

Commands must be entered as:

```
~ % command
```

### Available Commands

- run — start animation
- quit — stop/hide animation
- sauce — stop/hide animation & trigger SourceCodeProvider.show()
- help — joke help message
- HELP HELP — real help menu
- reset — reset options
- set \<option\> \<value\> — update numeric option
- show \<item\> — show settings panel
- hide — hide panel

## Props

All props are optional.

```ts
export type DigitalRainOptions = {
  autoRun?: boolean;
  fontSize?: number;
  fps?: number;
  alpha?: number;
  variabilityOfStart?: number;
  numberOfColumnOverlaps?: number;
  changeCharacterFrequency?: number;
  changeCharacterDuration?: number;
  frequencyOfRandomCellsInColumns?: number;
  numberOfRandomCellsInColumns?: number;
  staticMessages?: string[];
};
```

Defaults are built-in.

## Static Messages

Add text to appear inside the rain:

```tsx
<DigitalRain staticMessages={["HELLO WORLD", "NEO"]} />
```

Characters remain white, fixed, and readable even though the canvas characters are mirrored.

## Source Code Toggle

Use the provided context:

```tsx
import { useSourceCode } from "@mdcrty/digital-rain";

const { isVisible, showSourceCode, hideSourceCode, toggleSourceCode } =
  useSourceCode();
```

Display your own UI when isVisible is true:

```tsx
return isVisible ? <MySourceCodePanel /> : null;
```

## File structure
```
src/
  DigitalRain.tsx
  index.ts
  source-code/
    SourceCodeContext.tsx
dist/
README.md
package.json
```

## Build

```
npm run build
```

Outputs to dist/:
- ES module: index.js
- CommonJS: index.cjs
- Type declarations: index.d.ts

## License

MIT © mdcrty