@edgestore/react 0.0.0-alpha.14 → 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +121 -46
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,86 +1,161 @@
1
- # Getting Started
1
+ # Quick Start
2
2
 
3
- ### Next.js Setup
3
+ ## Next.js Setup
4
4
 
5
- #### Install
5
+ ### Install
6
6
 
7
- ```bash
8
- npm install @edgestore/react
7
+ Let's start by installing the required packages.
8
+
9
+ ```shell
10
+ npm install @edgestore/server @edgestore/react zod
9
11
  ```
10
12
 
11
- #### Environment Variables
13
+ ### Environment Variables
14
+
15
+ Then go to your [Dashboard](https://dashboard.edgestore.dev), create a new project and copy the keys to your environment variables.
12
16
 
13
- ```bash
14
- # .env
17
+ ```shell title=".env"
15
18
  EDGE_STORE_ACCESS_KEY=your-access-key
16
19
  EDGE_STORE_SECRET_KEY=your-secret-key
17
20
  ```
18
21
 
19
- #### API Route
22
+ ### Backend
23
+
24
+ Now we can create the backend code for our Next.js app.<br/>
25
+ Edge Store is compatible with both types of Next.js apps (`pages router` and `app router`).
26
+
27
+ The example below is the simplest bucket you can create with Edge Store. Just a simple file bucket with no validation that will be accessible by anyone with the link.
28
+
29
+ You can have multiple buckets in your app, each with its own configuration.
30
+
31
+ ```ts title="src/app/api/edgestore/[...edgestore]/route.ts"
32
+ import { initEdgeStore } from '@edgestore/server';
33
+ import { createEdgeStoreNextHandler } from '@edgestore/server/adapters/next/app';
34
+
35
+ const es = initEdgeStore.create();
36
+
37
+ /**
38
+ * This is the main router for the Edge Store buckets.
39
+ */
40
+ const edgeStoreRouter = es.router({
41
+ publicFiles: es.fileBucket(),
42
+ });
43
+
44
+ const handler = createEdgeStoreNextHandler({
45
+ router: edgeStoreRouter,
46
+ });
47
+
48
+ export { handler as GET, handler as POST };
49
+
50
+ /**
51
+ * This type is used to create the type-safe client for the frontend.
52
+ */
53
+ export type EdgeStoreRouter = typeof edgeStoreRouter;
54
+ ```
55
+
56
+ ### Frontend
57
+
58
+ Now let's initiate our context provider.
20
59
 
21
- ```jsx
22
- // pages/api/edgestore/[...edgestore].js
23
- import EdgeStore from '@edgestore/react/next';
60
+ ```tsx title="src/lib/edgestore.ts"
61
+ 'use client';
24
62
 
25
- export default EdgeStore();
63
+ import { EdgeStoreRouter } from '../app/api/edgestore/[...edgestore]/route';
64
+ import { createEdgeStoreProvider } from '@edgestore/react';
65
+
66
+ const { EdgeStoreProvider, useEdgeStore } =
67
+ createEdgeStoreProvider<EdgeStoreRouter>();
68
+
69
+ export { EdgeStoreProvider, useEdgeStore };
26
70
  ```
27
71
 
28
- #### Provider
72
+ And then wrap our app with the provider.
29
73
 
30
- ```jsx
31
- // pages/_app.jsx
32
- import { EdgeStoreProvider } from '@edgestore/react';
74
+ ```tsx title="src/app/layout.tsx"
75
+ import { EdgeStoreProvider } from '../lib/edgestore';
76
+ import './globals.css';
33
77
 
34
- export default function App({ Component, pageProps }) {
78
+ // ...
79
+
80
+ export default function RootLayout({
81
+ children,
82
+ }: {
83
+ children: React.ReactNode;
84
+ }) {
35
85
  return (
36
- <EdgeStoreProvider>
37
- <Component {...pageProps} />
38
- </EdgeStoreProvider>
86
+ <html lang="en">
87
+ <body>
88
+ <EdgeStoreProvider>{children}</EdgeStoreProvider>
89
+ </body>
90
+ </html>
39
91
  );
40
92
  }
41
93
  ```
42
94
 
43
- ### Upload image
95
+ ### Upload file
96
+
97
+ You can use the `useEdgeStore` hook to access typesafe frontend client and use it to upload files.
44
98
 
45
- ```jsx
46
- import { useEdgeStore } from '@edgestore/react';
99
+ ```tsx {1, 6, 19-28}
100
+ import { useEdgeStore } from '../lib/edgestore';
101
+ import * as React from 'react';
47
102
 
48
- const Page = () => {
49
- const [file, setFile] = useState(null);
50
- const { upload } = useEdgeStore();
103
+ export default function Page() {
104
+ const [file, setFile] = React.useState<File | null>(null);
105
+ const { edgestore } = useEdgeStore();
51
106
 
52
107
  return (
53
108
  <div>
54
- <input type="file" onChange={(e) => setFile(e.target.files[0])} />
109
+ <input
110
+ type="file"
111
+ onChange={(e) => {
112
+ setFile(e.target.files?.[0] ?? null);
113
+ }}
114
+ />
55
115
  <button
56
116
  onClick={async () => {
57
- await upload({
58
- file,
59
- key: 'path/to/image.jpg',
60
- });
117
+ if (file) {
118
+ const res = await edgestore.publicFiles.upload({
119
+ file,
120
+ onProgressChange: (progress) => {
121
+ // you can use this to show a progress bar
122
+ console.log(progress);
123
+ },
124
+ });
125
+ // you can run some server action or api here
126
+ // to add the necessary data to your database
127
+ console.log(res);
128
+ }
61
129
  }}
62
130
  >
63
131
  Upload
64
132
  </button>
65
133
  </div>
66
134
  );
67
- };
68
-
69
- export default Page;
135
+ }
70
136
  ```
71
137
 
72
- ### Show image
138
+ ### Replace file
73
139
 
74
- ```jsx
75
- import { useEdgeStore } from '@edgestore/react';
140
+ By passing the `replaceTargetUrl` option, you can replace an existing file with a new one.
141
+ It will automatically delete the old file after the upload is complete.
76
142
 
77
- const Page = () => {
78
- const { getImgSrc } = useEdgeStore();
143
+ You can also just upload the file using the same file name, but in that case, you might still see the old file for a while becasue of the CDN cache.
79
144
 
80
- return (
81
- <div>
82
- <img src={getImgSrc('path/to/image.jpg')} />
83
- </div>
84
- );
85
- };
145
+ ```tsx
146
+ const res = await edgestore.publicFiles.upload({
147
+ file,
148
+ options: {
149
+ replaceTargetUrl: oldFileUrl,
150
+ },
151
+ // ...
152
+ });
153
+ ```
154
+
155
+ ### Delete file
156
+
157
+ ```tsx
158
+ await edgestore.publicFiles.delete({
159
+ url: urlToDelete,
160
+ })
86
161
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edgestore/react",
3
- "version": "0.0.0-alpha.14",
3
+ "version": "0.0.1",
4
4
  "description": "The best DX for uploading files from your Next.js app",
5
5
  "homepage": "https://edgestore.dev",
6
6
  "repository": "https://github.com/edgestorejs/edgestore.git",
@@ -54,14 +54,14 @@
54
54
  "uuid": "^9.0.0"
55
55
  },
56
56
  "peerDependencies": {
57
- "@edgestore/server": "0.0.0-alpha.14",
57
+ "@edgestore/server": "0.0.1",
58
58
  "next": "*",
59
59
  "react": ">=16.8.0",
60
60
  "react-dom": ">=16.8.0",
61
61
  "zod": ">=3.0.0"
62
62
  },
63
63
  "devDependencies": {
64
- "@edgestore/server": "0.0.0-alpha.14",
64
+ "@edgestore/server": "0.0.1",
65
65
  "@types/cookie": "^0.5.1",
66
66
  "@types/node": "^18.11.18",
67
67
  "@types/uuid": "^9.0.1",
@@ -71,5 +71,5 @@
71
71
  "typescript": "^5.1.6",
72
72
  "zod": "^3.21.4"
73
73
  },
74
- "gitHead": "6e0044e7fcb252014e5a4fc9257d54e897f42b84"
74
+ "gitHead": "f57bc36304ce6bd97f5b85e33a2b1eeeaf7633d2"
75
75
  }