@edgestore/react

Getting Started

Next.js Setup

Install

npm install @edgestore/react

Environment Variables

# .env
EDGE_STORE_ACCESS_KEY=your-access-key
EDGE_STORE_SECRET_KEY=your-secret-key

API Route

// pages/api/edgestore/[...edgestore].js
import EdgeStore from '@edgestore/react/next';

export default EdgeStore();

Provider

// pages/_app.jsx
import { EdgeStoreProvider } from '@edgestore/react';

export default function App({ Component, pageProps }) {
  return (
    <EdgeStoreProvider>
      <Component {...pageProps} />
    </EdgeStoreProvider>
  );
}

Upload image

import { useEdgeStore } from '@edgestore/react';

const Page = () => {
  const [file, setFile] = useState(null);
  const { upload } = useEdgeStore();

  return (
    <div>
      <input type="file" onChange={(e) => setFile(e.target.files[0])} />
      <button
        onClick={async () => {
          await upload({
            file,
            key: 'path/to/image.jpg',
          });
        }}
      >
        Upload
      </button>
    </div>
  );
};

export default Page;

Show image

import { useEdgeStore } from '@edgestore/react';

const Page = () => {
  const { getImgSrc } = useEdgeStore();

  return (
    <div>
      <img src={getImgSrc('path/to/image.jpg')} />
    </div>
  );
};