open-index/open-npm huggingface dataset:
npm package: @jizirui/auto-fix-react
Description: react大屏自适应容器
Author: jizirui
Latest version: 1.0.1

<h1 align="center">auto-fix-react （大屏自适应容器）</h1>
<div align="center">
 <a href="https://react.dev">
    <img src="https://img.shields.io/badge/react-%3E=16.8.0-green.svg?logo=react&style=flat&colorA=084c61&colorB=f73859" alt="React" />
  </a>
  <a href="https://npmjs.org/package/@jizirui/auto-fix-react">
    <img src="https://img.shields.io/npm/v/@jizirui/auto-fix-react.svg?logo=npm&colorA=87ceeb&colorB=ffb6c1" alt="npm-version" />
  </a>
  <a href="https://npmjs.org/package/@jizirui/auto-fix-react">
    <img src="https://img.shields.io/bundlephobia/min/@jizirui/auto-fix-react.svg?colorA=8a2be2&colorB=00bdaa" alt="min-size" />
  </a>
</div>
<div align="center">
  <a href="https://github.com/Come2BtheOne/auto-fix-react/releases">
    <img src="https://img.shields.io/github/release/Come2BtheOne/auto-fix-react.svg?logo=github&logoColor=181717&colorA=ffa500&colorB=00ff7f" alt="release" />
  </a>  
  <a href="https://github.com/Come2BtheOne/auto-fix-react">
    <img src="https://img.shields.io/github/stars/Come2BtheOne/auto-fix-react.svg" alt="Stars" />
  </a>
</div>
<p align="center" style="margin-top: 40px;">
  <a style="color:#f73859;" href="https://github.com/Come2BtheOne/auto-fix-vue3">Vue 项目看这边</a>
</p>

## 安装

### npm

```js
npm install @jizirui/auto-fix-react
```

### pnpm

```js
pnpm add @jizirui/auto-fix-react
```

### yarn

```js
yarn add @jizirui/auto-fix-react
```

---

## 引入方式

### ESM

```js
import { FullScreenContainer } from '@jizirui/auto-fix-react'
```

### CommonJS

```js
const { useAutoFix, FullScreenContainer } = require('@jizirui/auto-fix-react/dist/cjs')
```

### UMD

```js
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="./node_modules/@jizirui/auto-fix-react/dist/umd/index.js"></script>

    <script type="text/babel">
      function PackageName() {
        const { useState } = window.React
        const { useAutoFix, FullScreenContainer } = window.autoFix
        const [name, setName] = useState('auto-fix')
        return (
          <FullScreenContainer width={1920} height={1080}>
            <h1>{name}</h1>
          </FullScreenContainer>
        )
      }
      ReactDOM.render(<PackageName />, document.getElementById('app'))
    </script>
```

---

## HTML 部分

```html
<!-- 组件形式 -->
<full-screen-container width={1920} height={1080}>
  <div>柱状图</div>
  <div>饼图</div>
  ...
</full-screen-container>
```

或

```html
<!-- Hook -->
<div
  style={{
    width: `${canvasWidth}px`,
    height: `${canvasHeight}px`,
    ...canvasStyle
  }}
>
  <div>柱状图</div>
  <div>饼图</div>
  ...
</div>
```
npm package: @jizirui/auto-fix-vue3
Description: vue3大屏自适应容器
Author: jizirui
Latest version: 1.0.8

<h1 align="center">auto-fix-vue3 （大屏自适应容器）</h1>
<div align="center">
 <a href="https://vuejs.org">
    <img src="https://img.shields.io/badge/vue-%3E=3.0.0-green.svg?logo=vuedotjs&style=flat&colorA=084c61&colorB=f73859" alt="Vue3" />
  </a>
  <a href="https://npmjs.org/package/@jizirui/auto-fix-vue3">
    <img src="https://img.shields.io/npm/v/@jizirui/auto-fix-vue3.svg?logo=npm&colorA=87ceeb&colorB=ffb6c1" alt="npm-version" />
  </a>
  <a href="https://npmjs.org/package/@jizirui/auto-fix-vue3">
    <img src="https://img.shields.io/bundlephobia/min/@jizirui/auto-fix-vue3.svg?colorA=8a2be2&colorB=00bdaa" alt="min-size" />
  </a>
</div>
<div align="center">
  <a href="https://github.com/Come2BtheOne/auto-fix-vue3/releases">
    <img src="https://img.shields.io/github/release/Come2BtheOne/auto-fix-vue3.svg?logo=github&logoColor=181717&colorA=ffa500&colorB=00ff7f" alt="release" />
  </a>  
  <a href="https://github.com/Come2BtheOne/auto-fix-vue3">
    <img src="https://img.shields.io/github/stars/Come2BtheOne/auto-fix-vue3.svg" alt="Stars" />
  </a>
</div>
<p align="center" style="margin-top: 40px;">
  <a style="color:#f73859;" href="https://github.com/Come2BtheOne/auto-fix-react">React 项目看这边</a>
</p>

## 安装

### npm

```js
npm install @jizirui/auto-fix-vue3
```

### pnpm

```js
pnpm add @jizirui/auto-fix-vue3
```

### yarn

```js
yarn add @jizirui/auto-fix-vue3
```

---

## 引入方式

### ESM

```js
import { FullScreenContainer } from '@jizirui/auto-fix-vue3'
```

### CommonJS

```js
const { useAutoFix, FullScreenContainer } = require('@jizirui/auto-fix-vue3/dist/cjs')
```

### UMD

```js
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="./node_modules/@jizirui/auto-fix-vue3/dist/umd/index.js"></script>
<script>
  const { createApp } = Vue
  const { canvasStyle, canvasWidth, canvasHeight } = window.autoFix.useAutoFix({
  width: 1920, //设计图宽度
  height: 1080 //设计图高度
})

  // 创建 Vue 实例
  createApp().component('full-screen-container', window.autoFix.FullScreenContainer).mount('#app')
</script>
```

---

### HTML 部分

```html
<!-- 组件形式 -->
<full-screen-container :width="1920" :height="1080">
  <div>柱状图</div>
  <div>饼图</div>
  ...
</full-screen-container>
```

或

```html
<!-- Hook -->
<div
  :style="{
    width: canvasWidth + 'px',
    height: canvasHeight + 'px',
    ...canvasStyle
  }"
>
  <div>柱状图</div>
  <div>饼图</div>
  ...
</div>
```
npm package: @jjackkun/svelte5-ui
Description: Svelte 5 UI components library with runes API
Author: jjackkun
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @jjackkun/svelte5-ui

Svelte 5 UI components library with runes API and SCSS styling.

## 특징

- 🚀 Svelte 5의 새로운 runes API 사용
- 🎨 SCSS로 스타일링 (Tailwind 없음)
- 📦 기능별로 분리된 컴포넌트 구조
- 🔧 TypeScript 지원 (JavaScript 구현)
- ✨ 가벼운 ESLint & Prettier 설정

## 설치

```bash
npm install @jjackkun/svelte5-ui
```

## 사용법

```svelte
<script>
  import { Button, Input, Card } from '@jjackkun/svelte5-ui';
  
  let inputValue = $state('');
</script>

<Card>
  {#snippet header()}
    <h2>로그인</h2>
  {/snippet}
  
  <Input 
    bind:value={inputValue}
    label="이메일"
    type="email"
    placeholder="이메일을 입력하세요"
  />
  
  <Button variant="primary" size="lg">
    로그인
  </Button>
</Card>
```

## 컴포넌트

### Form Components
- `Button` - 다양한 스타일의 버튼
- `Input` - 입력 필드
- `Select` - 선택 박스
- `Checkbox` - 체크박스
- `Radio` - 라디오 버튼
- `Textarea` - 텍스트 영역

### UI Components
- `Card` - 카드 레이아웃
- `Modal` - 모달 다이얼로그
- `Loading` - 로딩 스피너
- `Badge` - 배지
- `Alert` - 알림

### Layout Components
- `Container` - 컨테이너
- `Grid` - 그리드 레이아웃
- `Flex` - 플렉스 레이아웃

## 개발

```bash
# 의존성 설치
npm install

# 개발 서버 시작
npm run dev

# 빌드
npm run build

# 패키징
npm run package

# 배포
npm publish
```

## 라이선스

MIT