diff --git a/.changeset/dull-hairs-play.md b/.changeset/dull-hairs-play.md new file mode 100644 index 0000000..48e87bd --- /dev/null +++ b/.changeset/dull-hairs-play.md @@ -0,0 +1,6 @@ +--- +"@fepack/image": patch +"@fepack/react-image": patch +--- + +docs: README with Information on @fepack/image and @fepack/react-image diff --git a/README.md b/README.md index 8bd8544..fa9499b 100644 --- a/README.md +++ b/README.md @@ -22,14 +22,17 @@ # @fepack/image -`@fepack/image` provides tools designed to simplify image management. Explore and enhance your image handling with `@fepack/image` +[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/image) + +`@fepack/image` offers a collection of utilities designed for easy image control. ## Features - load +- LoadClient - checkWebPSupport - detect -- extractColors +- extractRGBs ## Installation @@ -47,7 +50,9 @@ yarn add @fepack/image # @fepack/react-image -If you're a React developer, `@fepack/react-image` provides specialized hooks and components to enhance your workflow. +[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/react-image) + +For React developers, `@fepack/react-image` provides hooks and components tailored for your workflow with images. ## Features diff --git a/packages/image/README.md b/packages/image/README.md index 26737cc..cf264e6 100644 --- a/packages/image/README.md +++ b/packages/image/README.md @@ -1,47 +1,23 @@ -# @fepack/image +# Introduction -image는 웹페이지의 로딩 시간을 줄이기 위해 사용됩니다. 이 패키지는 웹페이지에 사용되는 이미지들을 미리 로드하며, WEBP 이미지 포맷을 지원합니다. +## @fepack/image -## 설치 +`@fepack/image` offers a collection of utilities designed for easy image control. -이 패키지를 사용하려면 먼저 프로젝트에 설치해야 합니다. +[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/image) -``` -pnpm add -D @fepack/image -``` - -## 기능 - -1. **이미지 포맷 지원 확인**: 현재 브라우저가 `webp` 이미지 포맷을 지원하는지 확인합니다. -2. **이미지 로딩**: 지원하는 포맷의 이미지를 로딩합니다. - -## 사용법 +### Installation -### 이미지 포맷 지원 확인 +To install the latest stable version of `@fepack/image`, run the following commands: -```js -import { isSupportWebP } from "@fepack/image"; - -const isSupportedWebp = await isSupportWebP(); -if (isSupportedWebp) { - console.log("This browser supports webp format."); -} else { - console.log("This browser does not support webp format."); -} +```shell +npm install @fepack/image ``` -### 이미지 로딩 - -```js -import { load } from "@fepack/image"; - -const images = [ - { - defaultSrc: "path/to/default/image.jpg", - webpSrc: "path/to/image.webp", - }, - // ... more images -]; +```shell +pnpm add @fepack/image +``` -load(images); +```shell +yarn add @fepack/image ``` diff --git a/packages/react-image/README.md b/packages/react-image/README.md new file mode 100644 index 0000000..dcc6b7b --- /dev/null +++ b/packages/react-image/README.md @@ -0,0 +1,23 @@ +# Introduction + +## @fepack/image + +For React developers, `@fepack/react-image` provides hooks and components tailored for your workflow with images. + +[![npm version](https://img.shields.io/npm/v/@fepack/image?color=4C4885)](https://www.npmjs.com/package/@fepack/react-image) + +### Installation + +To install the latest stable version of `@fepack/react-image`, run the following commands: + +```shell +npm install @fepack/react-image +``` + +```shell +pnpm add @fepack/react-image +``` + +```shell +yarn add @fepack/react-image +```