Package Exports

@react-pixel-ui/core
@react-pixel-ui/core/dist/index.js
@react-pixel-ui/core/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@react-pixel-ui/core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@react-pixel-ui/core

픽셀화 렌더링의 코어 로직을 제공합니다. React 없이도 사용할 수 있는 순수 브라우저 API입니다.

주의: 내부적으로 Canvas, document, window에 의존하므로 브라우저 환경에서만 동작합니다.

설치

pnpm add @react-pixel-ui/core

API 개요

pixelizeCSS(css, options)

import { pixelizeCSS } from '@react-pixel-ui/core';

const result = pixelizeCSS(`
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: 2px solid #333;
  border-radius: 12px;
`, { width: 240, height: 120, pixelSize: 4 });

// result: { backgroundImage, textStyle, containerStyle }

createPixelizedStyle(css, width?, height?, pixelSize?)

컨테이너와 텍스트 스타일을 합친 CSSProperties 유사 객체를 반환합니다.

import { createPixelizedStyle } from '@react-pixel-ui/core';

const style = createPixelizedStyle('background: #333;', 200, 100, 4);

pixelizeCSSProperties(cssProps, options)

React CSSProperties 형태를 받아 픽셀화합니다.

import { pixelizeCSSProperties } from '@react-pixel-ui/core';

const style = pixelizeCSSProperties({
  background: 'linear-gradient(90deg, #667eea, #764ba2)',
  border: '2px solid #333',
  borderRadius: '12px'
}, { width: 240, height: 120, pixelSize: 4 });

브라우저 전용 안내

renderPixelatedBackground는 Canvas를 생성하므로 Node.js 환경에서 사용할 수 없습니다. SSR 프레임워크에서는 클라이언트 사이드에서만 호출되도록 보호하세요.

라이선스

MIT