Vitepressを導入する

npm add -D vitepress

npx vitepress init

package.json
  "scripts": {
    ...
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"

.gitignore
.vite
docs/.vitepress/cache

VitePressでページを表示する

VitePressのページにReactのデモを表示する

docs/introduction/what-is-react-dropzone-vv.md
# What is react-dropzone-vv

Simple React hook to create a drag-and-drop zone for files.
It is simple yet user-customizable.

A similar Package, [react-dropzone](https://github.com/react-dropzone/react-dropzone), is well known.
However, as of 2024, it has been out of date for about two years.
So I did not use react-dropzone for our own products, and used components I created myself. The created component is published as react-dropzone-vv.

react-dropzone-vv is heavily influenced by react-dropzone, but instead of Forking the repository, we rewrote it from scratch.
The purpose of react-dropzone-vv is to provide a simple and easy-to-use HTML5-compliant drag-and-drop zone for files.

# demo

<div ref="el" />

<script setup>
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { ref, onMounted } from 'vue'
import { Introduction } from './Introduction'

const el = ref()
onMounted(() => {
  const root = createRoot(el.value)
  root.render(createElement(Introduction, {}, null))
})
</script>

docs/introduction/Introduction.tsx
import { FC, useState } from "react"
import {
  useReactDropzoneVV,
  ReactDropzoneVV,
  RejectedClassifiedFile,
} from "../../lib/index"

export const Introduction: FC = () => {
  const [acceptedFiles, setAcceptedFiles] = useState<File[]>([])
  const [fileRejections, setFileRejections] = useState<
    RejectedClassifiedFile[]
  >([])

  const reactDropzoneVV = useReactDropzoneVV({
    accept: "image/*",
    onSelect: async (props) => {
      setAcceptedFiles(props.acceptedFiles)
      setFileRejections(props.fileRejections)
    },
    onError: (e) => {
      console.log(e)
    },
  })

  return (
    <section style={{ border: "solid", padding: "1rem" }}>
      <ReactDropzoneVV
        reactDropzoneVV={reactDropzoneVV}
        style={{
          padding: "2rem",
          border: "dashed",
          backgroundColor: reactDropzoneVV.isDragging ? "#737373" : "#404040",
        }}
      >
        <p>Drag & drop some files here, or click to select files</p>
        <p>{'(Allowed mime type is "image/*"")'}</p>
      </ReactDropzoneVV>

      <div>acceptedFiles</div>
      <ul>
        {acceptedFiles.map((acceptedFile, index) => (
          <li key={index}>{acceptedFile.name}</li>
        ))}
      </ul>
      <div>fileRejections</div>
      <ul>
        {fileRejections.map((fileRejection, index) => (
          <span key={index}>
            <li>{fileRejection.file.name}</li>
            <ul>
              <li>{fileRejection.rejectedCode}</li>
            </ul>
          </span>
        ))}
      </ul>
    </section>
  )
}

lib/のコードをdocs/にimportするときにエイリアスを使う

import {
  useReactDropzoneVV,
  ReactDropzoneVV,
  RejectedClassifiedFile,
} from "../../lib/index"

tsconfig.json
    "baseUrl": ".",
    "paths": {
      "@lib/*": ["./lib/*"]
    }

vite.config.ts
    resolve: {
      alias: [{ find: "@lib", replacement: "/lib" }],
    },

tsconfig.json
- "include": ["./lib", "./src"]
+ "include": ["./lib", "./src", "./docs"]

docs/.vitepress/config.ts
import { defineConfig } from "vitepress"

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "react-dropzone-vv",
  description: "...",
  themeConfig: {
    ...
  },
  vite: {
    resolve: {
      alias: [{ find: "@lib", replacement: "/../lib" }],
    },
  },
})

import {
  useReactDropzoneVV,
  ReactDropzoneVV,
  RejectedClassifiedFile,
} from "@lib/index"

ドキュメントのデプロイとホスティング

最後に