open-index/open-npm huggingface dataset:
npm package: @outpace-systems/react-file-hooks
Description: react hook for uploading file or files
Latest version: 2.3.0

# React File Hooks

[![NPM Version][npm-image]][npm-url]
[![Github License][license-image]][license-url]

React File Hooks is a hook simply for file upload
It can be used with a simple `<input type="file"/>`

🖥️[Live Example](https://codesandbox.io/s/upbeat-sun-ilydnm?file=/src/App.tsx)

## Installation

```bash
npm install @toranj/react-file-hooks axios
```

or

```bash
yarn add @toranj/react-file-hooks axios
```

## Usage

### `useUploader`

```jsx
import * as React from 'react';
import { useUploader } from '@toranj/react-file-hooks';

type TriggerProps = {
  styles?: {
    root?: React.CSSProperties,
    button?: React.CSSProperties
  };
  name?: string;
  onClick?: (taskId: string) => void
}

const Trigger = (props: TriggerProps) => {

  const { name, styles, onClick } = props;
  const inputRef = React.useRef<HTMLInputElement>(null);

  return (
    <div style={styles?.root}>
      <button
        style={styles?.button}
        onClick={() => {
          if (onClick) onClick(inputRef.current?.value ?? "taskId")
        }}
      >
        {name}
      </button>
      <input
        type="text"
        placeholder='taskId'
        ref={inputRef}
      />
    </div>
  )
}


export default () => {

  const inputRef = React.useRef<HTMLInputElement>(null);

  const [tasks, handler] = useUploader({
    url: "https://file.io?expires=1w",
    fieldname: "file",
    method: "post",
    headers: { "Content-Type": "multipart/form-data" },
    // separately:true  if you want to create seperate task for each file
  });

  function handleChange(e: any) {
    handler.start(
      e.currentTarget.files,
      // {
      //   key1: "value1",      
      //   key2: "value2"       
      // }
    );
  }


  const styles = {
    mx: { marginRight: 5, marginLeft: 5 },
    mt: { marginTop: 5 }
  }

  return (
    <div>
      <pre>
        {JSON.stringify(tasks, null, 2)}
      </pre>

      <input
        multiple
        ref={inputRef}
        style={{ display: "none" }}
        type="file"
        onChange={handleChange}
      />
      <button
        style={styles.mx}
        onClick={() => inputRef.current?.click()}
      >
        upload
      </button>

      <Trigger
        name="stop"
        styles={{
          root: styles.mt,
          button: styles.mx
        }}
        onClick={(taskId: string) => handler.stop(taskId)}
      />
      <Trigger
        name="remove"
        styles={{
          root: styles.mt,
          button: styles.mx
        }}
        onClick={(taskId: string) => handler.remove(taskId)}
      />
      <Trigger
        name="retry"
        styles={{
          root: styles.mt,
          button: styles.mx
        }}
        onClick={(taskId: string) => handler.retry(taskId)}
      />
    </div>
  );
};

```

## License
MIT

[npm-image]: https://img.shields.io/npm/v/@toranj/react-file-hooks
[npm-url]: https://www.npmjs.com/package/@toranj/react-file-hooks
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg
[license-url]: https://raw.githubusercontent.com/toranj-org/react-file-hooks/main/LICENSE
npm package: @outpacesoftware/systems
Description: AI-first design system - accessible, LLM-optimized components for React
Latest version: 0.0.2

# @outpacesoftware/systems

An AI-first design system with opinionated, accessible, LLM-optimized components for React.

## Features

- **Opinionated** - Beautiful dark-theme styling out of the box
- **Accessible** - WAI-ARIA patterns built in
- **AI-First** - Component manifests for LLM consumption via MCP
- **Composable** - Small building blocks that compose into complex UIs
- **Two Layers** - Styled components for quick use, primitives for customization

## Installation

```bash
npm install @outpacesoftware/systems
# or
pnpm add @outpacesoftware/systems
```

## Usage

### Styled Components (Recommended)

```tsx
import { Button, Input, Dialog, Badge } from '@outpacesoftware/systems';

// Ready to use with built-in styling
<Button variant="primary">Save Changes</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Learn more</Button>

<Input
  label="Email"
  placeholder="you@example.com"
  required
/>

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
```

### Primitives (For Custom Styling)

```tsx
import { Primitives } from '@outpacesoftware/systems';

// Unstyled primitives for full control
<Primitives.Button className="your-custom-styles">
  Click me
</Primitives.Button>

// Composition pattern for complex components
<Primitives.Dialog.Root>
  <Primitives.Dialog.Trigger>Open</Primitives.Dialog.Trigger>
  <Primitives.Dialog.Portal>
    <Primitives.Dialog.Backdrop />
    <Primitives.Dialog.Content>
      <Primitives.Dialog.Title>Title</Primitives.Dialog.Title>
      <Primitives.Dialog.Close />
    </Primitives.Dialog.Content>
  </Primitives.Dialog.Portal>
</Primitives.Dialog.Root>
```

## Components

### Styled (Opinionated)

| Component | Description |
|-----------|-------------|
| Button | Primary interaction trigger with variants |
| Input | Text input with label and error states |
| Select | Dropdown selection |
| Textarea | Multi-line text input |
| Checkbox | Boolean selection |
| Switch | Toggle on/off |
| Badge | Status indicators |
| Card | Content containers |
| Dialog | Modal dialogs |

### Primitives (Unstyled)

32 primitives including Dialog, Menu, Tabs, Tooltip, Popover, Toast, and more.

## For AI/LLMs

This design system is optimized for AI consumption. Each component includes a manifest with:

- Semantic description
- Props documentation
- Accessibility information
- Code examples

Query the API:

```bash
GET /api/design-system/query?semantic=show+status
GET /api/design-system/query?name=Button&format=llm
GET /api/design-system/manifest
```

## Requirements

- React 18+
- React DOM 18+

## License

MIT