open-index/open-npm huggingface dataset:
npm package: @re-dev/react-truncate
Description: Provides `Truncate`, `MiddleTruncate` and `ShowMore` React components for truncating multi-line spans and adding an ellipsis.
Author: chengpeiquan
Latest version: 0.6.0

<p align='center'>
  <img src="./docs/public/logo.png" width="200" alt="@re-dev/react-truncate" />
</p>

<h1 align='center'>@re-dev/react-truncate</h1>

<p align='center'>
  <a href='https://www.npmjs.com/package/@re-dev/react-truncate'>
    <img src="https://img.shields.io/npm/v/@re-dev/react-truncate?color=29c1e9&label=npm" />
  </a>
  <a href="https://www.npmjs.com/package/@re-dev/react-truncate" target="__blank">
    <img src="https://img.shields.io/npm/dy/@re-dev/react-truncate?color=29c1e9&label=downloads" />
  </a>
  <a href="https://truncate.js.org" target="__blank">
    <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=29c1e9" />
  </a>
  <a href="https://codecov.io/gh/remanufacturing/react-truncate">
    <img alt="Test Coverage" src="https://img.shields.io/codecov/c/github/remanufacturing/react-truncate?color=29c1e9" />
  </a>
  <a href="https://github.com/remanufacturing/react-truncate" target="__blank">
    <img alt="GitHub stars" src="https://img.shields.io/github/stars/remanufacturing/react-truncate?style=social" />
  </a>
</p>
<br>
<br>

[English](https://truncate.js.org) | [简体中文](https://truncate.js.org/zh/)

Provides `Truncate`, `MiddleTruncate` and `ShowMore` React components for truncating multi-line spans and adding an ellipsis.

When you need the collapsed state to keep rendered inline markup such as links, classes, or inline styles, enable the opt-in `preserveMarkup` prop on `Truncate` or `ShowMore`. The default path remains optimized for plain-text truncation.

## Installation

With npm(or yarn, or pnpm):

```bash
npm install @re-dev/react-truncate
```

## Documentation

- [Truncate](https://truncate.js.org/reference/truncate/)

A basic component for cropping text. Usually there is no need to use it directly. `<ShowMore />` and `<MiddleTruncate />` provided by this package are both extended based on this component.

- [ShowMore](https://truncate.js.org/reference/show-more/)

A "Show More" component, when the content exceeds the set number of display lines, an expand button will appear to view more content.

- [MiddleTruncate](https://truncate.js.org/reference/middle-truncate/)

A "middle ellipsis" component, when the content exceeds the limit of the parent's width, an ellipsis symbol will appear (similar to CSS's text-overflow: ellipsis effect), but its omission position can be specified in the middle of the text instead of the end.

## Release Notes

Please refer to [CHANGELOG](https://github.com/remanufacturing/react-truncate/blob/main/CHANGELOG.md) for details.

## License

MIT License © 2023-PRESENT [chengpeiquan](https://github.com/chengpeiquan)
npm package: @re-frame/effects
Description: TODO: Describe what effects are.
Author: David Zukowski
Latest version: 0.20.0

# Effects

TODO: Describe what effects are.

## HTTP

```js
import {http} from "@re-frame/effects"
import {createStore} from "@re-frame/store"

const store = createStore()
store.registerEffect("http", http)

store.event("load-data", ctx => ({
  db: {
    ...ctx.db,
    loading: true,
  },
  http: {
    method: "GET",
    url: "my.api.com/endpoint",
    success: "load-data-success",
    failure: "load-data-failure",
  },
}))
store.event("load-data-success", (db, {response}) => {
  return {
    loading: false,
    data: response,
  }
})
store.event("load-data-failure", (db, {error}) => {
  return {
    loading: false,
    error,
  }
})
```

## Orchestrate

```js
import {orchestrate} from "@re-frame/effects"
import {createStore} from "@re-frame/store"

const store = createStore()
store.effect("orchestrate", orchestrate)

store.event.fx("boot", () => ({
  orchestrate: {
    dispatch: {id: "first-event"},
    rules: [
      {after: "first-event", dispatch: {id: "second-event"}},
      {
        after: "second-event",
        dispatch: [{id: "third-event"}, {id: "fourth-event"}],
      },
      {after: "third-event", dispatch: {id: "last-event"}, halt: true},
    ],
  },
}))
```

## Creating Custom Effects

While this packages provides numerous built-in effects for you, it's also easy to define your own:

```js
store.effect("wait", store => config => {
  setTimeout(() => {
    store.dispatch(config.dispatch)
  }, config.ms)
})

store.event.fx("test-wait", ctx => ({
  db: {
    ...ctx.db,
    waiting: true,
  },
  wait: {
    ms: 5000,
    dispatch: "done-waiting",
  },
}))
```
npm package: @re-frame/preact
Description: 1. Make your store available via React context by using `Provider` from `@re-frame/preact` at the top of your application. This will allow you to access subscriptions and dispatch events within the React tree.
Author: David Zukowski
Latest version: 0.20.0

# @re-frame/preact

1. Make your store available via React context by using `Provider` from `@re-frame/preact` at the top of your application. This will allow you to access subscriptions and dispatch events within the React tree.

```js
import React from "react"
import ReactDOM from "react-dom"
import {createStore} from "@re-frame/standalone"
import {Provider} from "@re-frame/react"

const store = createStore()

const App = () => (
  <Provider store={store}>
    <YourAppGoesHere />
  </Provider>
)

ReactDOM.render(<App />, document.getElementById("root"))
```

2. Subscribe to your store from within the tree.

```js
import React from "react"
import {useSubscription} from "@re-frame/react"

const ChatList = () => {
  const chats = useSubscription("chats")
  return (
    <ol>
      {chats.map(chat => (
        <li key={chat.id}>{chat.title}</li>
      )}
    </ol>
  )
}
```

3. Dispatch events to your store.

```js
import React from "react"
import {useDispatch} from "@re-frame/react"

const MyComponent = () => {
  const dispatch = useDispatch()
  return (
    <button onClick={() => dispatch({id: "my-event"})}>
      Click me to trigger "my-event"
    </button>
  )
}
```
npm package: @re-frame/react
Description: 1. Make your store available via React context by using `Provider` from `@re-frame/react` at the top of your application. This will allow you to access subscriptions and dispatch events within the React tree.
Author: David Zukowski
Latest version: 0.20.0

# @re-frame/react

1. Make your store available via React context by using `Provider` from `@re-frame/react` at the top of your application. This will allow you to access subscriptions and dispatch events within the React tree.

```js
import React from "react"
import ReactDOM from "react-dom"
import {createStore} from "@re-frame/standalone"
import {Provider} from "@re-frame/react"

const store = createStore()

const App = () => (
  <Provider store={store}>
    <YourAppGoesHere />
  </Provider>
)

ReactDOM.render(<App />, document.getElementById("root"))
```

2. Subscribe to your store from within the tree.

```js
import React from "react"
import {useSubscription} from "@re-frame/react"

const ChatList = () => {
  const chats = useSubscription("chats")
  return (
    <ol>
      {chats.map(chat => (
        <li key={chat.id}>{chat.title}</li>
      )}
    </ol>
  )
}
```

3. Dispatch events to your store.

```js
import React from "react"
import {useDispatch} from "@re-frame/react"

const MyComponent = () => {
  const dispatch = useDispatch()
  return (
    <button onClick={() => dispatch({id: "my-event"})}>
      Click me to trigger "my-event"
    </button>
  )
}
```
npm package: @re-frame/store
Description: A re-frame store with an especially ergonomic API
Author: David Zukowski
Latest version: 0.20.0

# @re-frame/store

Below is an example that shows how to create a store, define event handlers, setup and access subscriptions, and run side effects. For now, you should refer to the original re-frame documentation for best practices.

Unlike the original re-frame library which uses a singleton store, the JavaScript package provides an API for creating your own independent stores. If you want the convenience of a global store, use `@re-frame/global`.

```js
import {createStore} from "@re-frame/store"

const store = createStore()
```

A store holds application state in an object called "db" (it's your in-memory database). To make updates to the db, you register and dispatch events:

```js
// Define event handlers:
store.event("init", (db, event) => ({count: 0}))
store.event("increment", (db, event) => ({count: db.count + 1}))

// Send events to the store:
store.dispatch("init") // db = { count: 0 }
store.dispatch("increment") // db = { count: 1 }
store.dispatch("increment") // db = { count: 2 }

// Pass data with events:
store.event("add", (db, {amount}) => ({count: db.count + amount}))
store.dispatch("add", {amount: 5})
```

To access the db, register queries with the store. All active queries are recomputed every time the db changes, and are only recomputed once per change regardless of how many subscribers exist.

```js
store.computed("count", db => db.count)

const count = store.subscribe("count")

store.dispatchSync("init")       // db = { count: 0 }
count.deref()                    // 0
store.dispatchSync("increment")  // db = { count: 1 }
count.deref()                    // 1

// You can also watch a subscription to see all changes over time:
count.watch(value => { ... })

// Cleanup your subscription when you're done with it.
count.dispose()

// You can also pass parameters to the query:
store.computed("todos", (db, { completed }) => {
  return db.todos.filter(todo => todo.completed === completed)
})
store.subscribe("todos", { completed: false })
```

Most events will simply update the store's state. This update is one particular type of effect that events can have (appropriately called the "db" effect"), and while most events will only update the db, you can step up a level and trigger any number of effects.

```js
import {http} from "@re-frame/effects"

// Register your effect with the store:
store.effect("http", http)

// Define an event handler that will trigger that effect:
store.event.fx("load-data", (ctx, event) => ({
  // Updates your store state ("db")
  db: {
    ...ctx.db,
    loadingData: true,
  },
  // Also triggers an "http" effect to make a network request.
  http: {
    url: "my.api.com/endpoint",
    method: "GET",
    success: "load-data-success",
    failure: "load-data-failure",
  },
}))

// Initiate the effect:
store.dispatch("load-data")
```
npm package: @re-sohail/react-ui-library
Description: A simple React UI component library
Author: Muhammad
Latest version: 1.0.0

# My UI Library

A simple React UI component library with modern, accessible components.

## Installation

### From npm (when published)

```bash
npm install my-ui-library
```

### Local installation for development

```bash
npm install ../my-ui-library
```

## Usage

### Basic Example

```jsx
import React from "react";
import { HelloButton } from "my-ui-library";

function App() {
  return (
    <div>
      <HelloButton>Click me!</HelloButton>
    </div>
  );
}

export default App;
```

### Advanced Example

```jsx
import React from "react";
import { HelloButton } from "my-ui-library";

function App() {
  return (
    <div>
      <HelloButton variant="primary" size="large">
        Primary Button
      </HelloButton>

      <HelloButton variant="secondary" size="medium">
        Secondary Button
      </HelloButton>

      <HelloButton size="small" disabled>
        Disabled Button
      </HelloButton>
    </div>
  );
}

export default App;
```

## Components

### HelloButton

A customizable button component with multiple variants and sizes.

#### Props

| Prop        | Type                             | Default     | Description                    |
| ----------- | -------------------------------- | ----------- | ------------------------------ |
| `children`  | `ReactNode`                      | -           | Button content (required)      |
| `variant`   | `'primary' \| 'secondary'`       | `'primary'` | Button style variant           |
| `size`      | `'small' \| 'medium' \| 'large'` | `'medium'`  | Button size                    |
| `disabled`  | `boolean`                        | `false`     | Whether the button is disabled |
| `className` | `string`                         | -           | Additional CSS class name      |

#### Examples

```jsx
// Primary button
<HelloButton variant="primary">Primary</HelloButton>

// Secondary button
<HelloButton variant="secondary">Secondary</HelloButton>

// Different sizes
<HelloButton size="small">Small</HelloButton>
<HelloButton size="medium">Medium</HelloButton>
<HelloButton size="large">Large</HelloButton>

// Disabled state
<HelloButton disabled>Disabled</HelloButton>

// With custom className
<HelloButton className="my-custom-class">Custom</HelloButton>
```

## Development

### Building the library

```bash
npm run build
```

### Development mode

```bash
npm run dev
```

## License

MIT

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
npm package: @re-space/example
Description: > This package is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
Author: Maksym Tarsis
Latest version: 0.1.0
Deprecated: WARNING: this project has been renamed to @monoreact/package-example.

# User Guide

> This package is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.

> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)

## Commands

Re-space scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.

```
yarn start
```

This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.

Then run either example playground or storybook:

### Docz

Run inside another terminal:

```
yarn docz
```

This loads the component documentation of `*.mdx` extension.

### Example

Then run the example inside another:

```
cd example
yarn install
yarn start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure the package is running in watch mode.

To do a one-off build, use `yarn build`.

To run tests, use `yarn test`.

### Jest

Jest tests are set up to run with `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

### Rollup

The package uses [Rollup v1.x](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.

### TypeScript

`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.


## Using the Playground

```
cd example
yarn install
yarn start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure the package is running in watch mode like we recommend above.

## Named Exports

Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.

## Including Styles

There are many ways to ship styles, including with CSS-in-JS. Configure how you like.

For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.

## Publishing to NPM

We recommend using https://github.com/sindresorhus/np.
npm package: @re-taro/configs
Description: re-taro's JavaScript/TypeScript toolchain configurations
Author: Rintaro Itokawa
Latest version: 1.4.1

# @re-taro/configs

## install

```bash
pnpm add -D @re-taro/configs
```

## usage

### ESLint

```js
import { re_taro } from '@re-taro/configs/eslint';

export default re_taro();
```

### Prettier

```js
import { re_taro } from '@re-taro/configs/prettier';

export default re_taro();
```
npm package: @re-taro/renovate-config
Description: My personal renovate config
Author: Rintaro Itokawa
Latest version: 1.2.0

# @re-taro/renovate-config

[![npm version](https://badge.fury.io/js/@re-taro%2Frenovate-config.svg)](https://badge.fury.io/js/@re-taro%2Frenovate-config)

My personal renovate config.

## Usage

- `renovate.json`

```json
{
  "extends": ["github>re-taro/renovate-config"]
}
```

## Settings

See the settings in [renovate.json](https://github.com/re-taro/renovate-config/blob/main/default.json) and [Configuration Options](https://renovatebot.com/docs/configuration-options/) in Renovate Docs

### GitHub Actions

If you have a branch protection rule for GitHub Actions, you have to run the GitHub Action on pushing branches to allow Renovate create pull requests.
Otherwise, Renovate won't create pull requests due to the pending status.

```yaml
on:
  push:
    branches:
      - main
      - renovate/** # branches Renovate creates
  pull_request:
```

## License

MIT License