Merge pull request #31 from uploadcare/react-uploader-example

feat(react-uploader): added react-uploader example via adapter

Author: Egor Didenko

README.md

@@ -26,10 +26,13 @@ Each directory in this repository represents a different framework maintained by
 
 * [JavaScript](./examples/js-uploader/)
 * [React](./examples/react-uploader/)
+* [React via Adapter](./examples/react-uploader-adapter/)
 * [Angular](./examples/angular-uploader/)
 * [Vue](./examples/vue-uploader/)
 * [Svelte](./examples/svelte-uploader/)
 * [Next.js](./examples/next-uploader/)
+* [Next.js via Adapter](./examples/next-uploader-adapter/)
+
 
 Each example provides a live demo, instructions to run it locally, and helpful tips right in the code.
 

examples/next-uploader-adapter/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "Node.js",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/next-uploader-adapter/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+out
+dist
+dist-ssr
+coverage
+*.local
+
+.next
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/next-uploader-adapter/README.md

@@ -0,0 +1,44 @@
+<p align="center">
+  <a href="https://uploadcare.com?ref=github-next-example-readme">
+    <picture>
+      <source media="(prefers-color-scheme: light)" srcset="https://ucarecdn.com/1b4714cd-53be-447b-bbde-e061f1e5a22f/logo-safespace-transparent.svg">
+      <source media="(prefers-color-scheme: dark)" srcset="https://ucarecdn.com/3b610a0a-780c-4750-a8b4-3bf4a8c90389/logo-transparent-inverted.svg">
+      <img width=250 alt="Uploadcare logo" src="https://ucarecdn.com/1b4714cd-53be-447b-bbde-e061f1e5a22f/logo-safespace-transparent.svg">
+    </picture>
+  </a>
+</p>
+<p align="center">
+  <a href="https://uploadcare.com?ref=github-next-example-readme">Website</a> • 
+  <a href="https://uploadcare.com/docs/start/quickstart?ref=github-next-example-readme">Quick Start</a> • 
+  <a href="https://uploadcare.com/docs?ref=github-next-example-readme">Docs</a> • 
+  <a href="https://uploadcare.com/blog?ref=github-next-example-readme">Blog</a> • 
+  <a href="https://discord.gg/mKWRgRsVz8?ref=github-next-example-readme">Discord</a> •
+  <a href="https://twitter.com/Uploadcare?ref=github-next-example-readme">Twitter</a>
+</p>
+
+# Next.js File Uploader with Uploadcare Blocks
+
+[![Edit next-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/next-uploader-adapter/)
+
+## Run this demo locally
+
+```bash
+# clone this repo and go to the cloned folder
+
+$ cd examples/next-uploader-adapter
+
+$ npm install
+# or `yarn install`, if you wish
+
+$ npm run start
+# or `yarn start`
+```
+
+## Contribution
+
+You’re always welcome to contribute:
+
+* Create [issues](https://github.com/uploadcare/blocks-examples/issues) every time you feel something is missing or goes wrong.
+* Provide your feedback or drop us a support request at <a href="mailto:[email protected]">[email protected]</a>.
+* Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well.
+* Star this repo if you like it ⭐️

examples/next-uploader-adapter/next.config.js

@@ -0,0 +1,16 @@
+const { PHASE_PRODUCTION_BUILD } = require('next/constants')
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  output: 'export',
+};
+
+module.exports = (phase) => {
+  if (phase === PHASE_PRODUCTION_BUILD) {
+    return nextConfig;
+  }
+
+  return {};
+}