@edge-store/react
v0.0.0-alpha.8
Published
Image Handling for React/Next.js
Downloads
538
Maintainers
Readme
Getting Started
Next.js Setup
Install
npm install @edge-store/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 "@edge-store/react/next";
export default EdgeStore();
Provider
// pages/_app.jsx
import { EdgeStoreProvider } from "@edge-store/react";
export default function App({ Component, pageProps }) {
return (
<EdgeStoreProvider>
<Component {...pageProps} />
</EdgeStoreProvider>
);
}
Upload image
import { useEdgeStore } from "@edge-store/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 "@edge-store/react";
const Page = () => {
const { getImgSrc } = useEdgeStore();
return (
<div>
<img src={getImgSrc("path/to/image.jpg")} />
</div>
);
};