open-index/open-npm huggingface dataset:
npm package: @nano_kit/react
Description: Seamless integration between @nano_kit/store signals, dependency injection and React components.
Author: dangreen
Latest version: 1.0.0-alpha.5

# @nano_kit/react

[![ESM-only package][package]][package-url]
[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Install size][size]][size-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
[package-url]: https://nodejs.org/api/esm.html

[npm]: https://img.shields.io/npm/v/%40nano_kit%2Freact.svg
[npm-url]: https://npmjs.com/package/@nano_kit/react

[deps]: https://img.shields.io/librariesio/release/npm/%40nano_kit%2Freact
[deps-url]: https://libraries.io/npm/%40nano_kit%2Freact

[size]: https://deno.bundlejs.com/badge?q=%40nano_kit%2Freact
[size-url]: https://bundlejs.com/?q=%40nano_kit%2Freact

[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/nano_kit/tests.yml?branch=main
[build-url]: https://github.com/TrigenSoftware/nano_kit/actions

[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/nano_kit.svg
[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/nano_kit

The `@nano_kit/react` package provides seamless integration between [@nano_kit/store](../store) signals, dependency injection and React components.

## Installation

```bash
pnpm add @nano_kit/store @nano_kit/react
# or
npm install @nano_kit/store @nano_kit/react
# or
yarn add @nano_kit/store @nano_kit/react
```

## Quick Start

Here is a minimal example demonstrating reactive state in React:

```tsx
import { signal } from '@nano_kit/store'
import { useSignal } from '@nano_kit/react'

const $count = signal(0)

export function Counter() {
  const count = useSignal($count)

  return (
    <button onClick={() => $count(count + 1)}>
      Count: {count}
    </button>
  )
}
```

## Documentation

For comprehensive guides, API reference, and integration patterns, visit the [documentation website](https://nano-kit.js.org/integrations/react).
npm package: @nano_kit/react-router
Description: React integration for @nano_kit/router with code splitting, dependency injection, and state management.
Author: dangreen
Latest version: 1.0.0-alpha.3

# @nano_kit/react-router

[![ESM-only package][package]][package-url]
[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Install size][size]][size-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
[package-url]: https://nodejs.org/api/esm.html

[npm]: https://img.shields.io/npm/v/@nano_kit/react-router.svg
[npm-url]: https://npmjs.com/package/@nano_kit/react-router

[deps]: https://img.shields.io/librariesio/release/npm/@nano_kit/react-router
[deps-url]: https://libraries.io/npm/@nano_kit/react-router

[size]: https://deno.bundlejs.com/badge?q=@nano_kit/react-router
[size-url]: https://bundlejs.com/?q=@nano_kit/react-router

[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/nano_kit/tests.yml?branch=main
[build-url]: https://github.com/TrigenSoftware/nano_kit/actions

[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/nano_kit.svg
[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/nano_kit

The `@nano_kit/react-router` package provides React integration for [@nano_kit/router](../router). It allows you to use the router's powerful features like code splitting, dependency injection, and state management directly within your React application.

## Installation

```bash
pnpm add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
# or
npm install @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
# or
yarn add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router
```

## Quick Start

Basically, `@nano_kit/react-router` re-exports everything from `@nano_kit/router`, so you can use all base router functions:

```tsx
import { browserNavigation, app, layout, page, loadable, Outlet } from '@nano_kit/react-router'
import { MainLayout } from './MainLayout'

/* Define routes config */
const routes = {
  home: '/',
  user: '/users/:id'
} as const

/* Create navigation */
const [$location, navigation] = browserNavigation(routes)

/* Define loader fallback */
const Loader = () => <div>Loading...</div>

/* Create App component */
const App = app($location, [
  layout(MainLayout, [
    page('home', loadable(() => import('./Home'), Loader)),
    page('user', loadable(() => import('./User'), Loader))
  ])
])

/* Render App */
createRoot(document.getElementById('root')!).render(<App />)
```

## Documentation

For comprehensive guides, API reference, and integration patterns, visit the [documentation website](https://nano-kit.js.org/integrations/react-router).
npm package: @nano_kit/store
Description: A lightweight state management library inspired by Nano Stores.
Author: dangreen
Latest version: 1.0.0-alpha.1

# @nano_kit/store

[![ESM-only package][package]][package-url]
[![NPM version][npm]][npm-url]
[![Dependencies status][deps]][deps-url]
[![Install size][size]][size-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
[package-url]: https://nodejs.org/api/esm.html

[npm]: https://img.shields.io/npm/v/@nano_kit/store.svg
[npm-url]: https://npmjs.com/package/@nano_kit/store

[deps]: https://img.shields.io/librariesio/release/npm/@nano_kit/store
[deps-url]: https://libraries.io/npm/@nano_kit%2Fstore

[size]: https://deno.bundlejs.com/badge?q=@nano_kit/store
[size-url]: https://bundlejs.com/?q=@nano_kit/store

[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/nano_kit/tests.yml?branch=main
[build-url]: https://github.com/TrigenSoftware/nano_kit/actions

[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/nano_kit.svg
[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/nano_kit

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="../../website/src/assets/star_white.svg">
  <img alt="Four-pointed star logo" src="../../website/src/assets/star_black.svg" width="100" height="100" align="right">
</picture>

A lightweight state management library inspired by [Nano Stores](https://github.com/nanostores/nanostores) and built around [a push-pull based reactivity system](https://github.com/stackblitz/alien-signals).

- **Tiny**. ~2 kB (minified & brotlied). Zero dependencies.
- **Fast**. Optimized for performance using the push-pull algorithm.
- **Tree-Shakeable**. Only the methods you import end up in your bundle.
- **TypeScript**. First-class type support out of the box.

## Installation

```bash
pnpm add @nano_kit/store
# or
npm install @nano_kit/store
# or
yarn add @nano_kit/store
```

## Quick Start

Here is a minimal example demonstrating signals, computed values, and effects in action:

```ts
import { signal, onMount, computed, effect } from '@nano_kit/store'

/* Create independent atomic stores */
const $count = signal(1)

/* Mountable: Run logic only when store has listeners */
onMount($count, () => {
  console.log('Mounted: Store is active')
  /* e.g., open websocket, start timer, etc. */

  return () => {
    console.log('Unmounted: Store is idle')
    /* e.g., close websocket, stop timer */
  }
})

/* Derive state (computed values are lazy & cached) */
const $double = computed(() => $count() * 2)

/* React to changes (triggers onMount) */
const unsub = effect(() => {
  console.log(`Count: ${$count()}, Double: ${$double()}`)
})
// Output: Count: 1, Double: 2

/* Update triggers granular propagation */
$count(2)
// Output: Count: 2, Double: 4

/* Cleanup: removes listener and triggers onMount destructor */
unsub()
// Output: Unmounted: Store is idle
```

## Documentation

For comprehensive guides, advanced patterns, and API reference, visit the [documentation website](https://nano-kit.js.org/store).
npm package: @nanoandrew4/vue3-carousel-3d
Description: Beautiful, flexible and touch supported 3D Carousel for Vue.js
Author: Vladimir Bujanovic
Latest version: 1.0.2

# Vue Carousel 3d

[![Latest Stable Version](https://img.shields.io/npm/v/@nanoandrew4/vue3-carousel-3d.svg)](https://www.npmjs.com/package/@nanoandrew4/vue3-carousel-3d)

**[Full documentation and examples](https://wlada.github.io/vue-carousel-3d)**

## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [License](#license)

## Installation

``` bash
npm install -S @nanoandrew4/vue3-carousel-3d
```

## Usage

##### Usage (Global)

You may install Vue Carousel 3d globally:

``` js
import '@nanoandrew4/vue3-carousel-3d/dist/style.css'

import { createApp } from 'vue'
import { Carousel3dPlugin } from '@nanoandrew4/vue3-carousel-3d'

const app = createApp(App)

app.use(Carousel3dPlugin)
```
This will make **&lt;Carousel3d&gt;** and **&lt;Slide&gt;** available to all components within your Vue app.

##### Usage (Local)

Include the Carousel 3d into your component using import:

``` js
import { Carousel3d, Slide } from '@nanoandrew4/vue3-carousel-3d';

export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
```

## HTML Structure

Once the **Carousel3d** and **Slide** components are installed globally or imported, they can be used in templates like below:

``` html
  <Carousel3d>
    <Slide :index="0">
      Slide 1 Content
    </Slide>
    <Slide :index="1">
      Slide 2 Content
    </Slide>
  </Carousel3d>
```

Keep in mind that **index** property on slide component is required property and you will need to pass it for every slide starting from 0

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.