aws-amplify

Open Source

amplify-ui

<img src="./docs/public/amplify-logo.svg" alt="AWS Amplify Logo" style="width:2vw"> AWS Amplify --- <p align="center"> <img src="docs/public/svg/favicon.svg" style="width:12vw" alt="Amplify UI logo" /> <h1 align="center">Amplify UI</h1> </p> [![GitHub](https://img.shields.io/github/license/aws-amplify/amplify-ui)](LICENSE) [![Discord](https://img.shields.io/discord/308323056592486420?logo=discord)](https://discord.gg/jWVbPfC) [![Open Bugs](https://img.shields.io/github/issues/aws-amplify/amplify-ui/bug?color=d73a4a&label=bugs)](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+is%3Aopen+label%3Abug) [![Feature Requests](https://img.shields.io/github/issues/aws-amplify/amplify-ui/feature-request?color=ff9001&label=feature%20requests)](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+label%3Afeature-request+is%3Aopen) [![GA milestone](https://img.shields.io/github/milestones/progress-percent/aws-amplify/amplify-ui/1)](https://github.com/aws-amplify/amplify-ui/milestone/1) Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into _any_ application. Amplify UI consists of: 1. Connected components that simplify complex cloud-connected workflows, like Authenticator. 2. Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges. 3. Data-bound components that make it easy to display dynamic data, like DataStoreCollections. 4. Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand. | Package Name | Downloads | Version | | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | [@aws-amplify/ui-react](https://www.npmjs.com/package/@aws-amplify/ui-react) | ![](https://img.shields.io/npm/dw/@aws-amplify/ui-react?label=Download&logo=Amplify&style=flat) | ![](https://img.shields.io/npm/v/@aws-amplify/ui-react/latest) | | [@aws-amplify/ui-vue](https://www.npmjs.com/package/@aws-amplify/ui-vue) | ![](https://img.shields.io/npm/dw/@aws-amplify/ui-vue?label=Download&logo=Amplify) | ![](https://img.shields.io/npm/v/@aws-amplify/ui-vue/latest?style=flat) | | [@aws-amplify/ui-angular](https://www.npmjs.com/package/@aws-amplify/ui-angular) | ![](https://img.shields.io/npm/dw/@aws-amplify/ui-angular?label=Download&logo=Amplify) | ![](https://img.shields.io/npm/v/@aws-amplify/ui-angular/latest) | ## Documentation - https://ui.docs.amplify.aws/ ## Getting started - https://ui.docs.amplify.aws/getting-started/installation ## Component Matrix | **Connected Components** | **React** | **React Native** | **Angular** | **Vue** | | :----------------------- | :-------: | :--------------: | :---------: | :-----: | | Authenticator | ✅ | ✅ | ✅ | ✅ | | InAppMessagingDisplay | ✅ | ✅ | | | | MapView/LocationSearch | ✅ | | | | | Account Settings | ✅ | | | | | StorageBrowser | ✅ | | | | | FileUploader | ✅ | | | | | StorageImage | ✅ | | | | | FaceLivenessDetector | ✅ | | | | | **Primitives** | **React** | | :--------------- | :-------: | | Alert | ✅ | | Autocomplete | ✅ | | Badge | ✅ | | Button | ✅ | | Card | ✅ | | CheckboxField | ✅ | | Collection | ✅ | | Divider | ✅ | | Expander | ✅ | | Flex | ✅ | | Grid | ✅ | | Heading | ✅ | | HighlightMatch | ✅ | | Icon | ✅ | | Image | ✅ | | Link | ✅ | | Loader | ✅ | | Menu | ✅ | | Pagination | ✅ | | PasswordField | ✅ | | PhoneNumberField | ✅ | | Placeholder | ✅ | | RadioGroupField | ✅ | | Rating | ✅ | | ScrollView | ✅ | | SearchField | ✅ | | SelectField | ✅ | | SliderField | ✅ | | StepperField | ✅ | | SwitchField | ✅ | | Table | ✅ | | Tabs | ✅ | | Text | ✅ | | TextAreaField | ✅ | | TextField | ✅ | | ToggleButton | ✅ | | View | ✅ | | VisuallyHidden | ✅ | ## Version Support AWS Amplify UI library (React, React Native, Angular, and Vue) that depends on AWS Amplify JavaScript library v4 and below will end support on **April 13, 2026**, as documented in our [AWS Amplify UI libraries version support calendar](https://github.com/aws-amplify/amplify-ui/issues/6712). Effective immediately, the AWS Amplify UI library that depends on AWS Amplify JavaScript library v4 and below will enter **Maintenance Mode** until April 13, 2026 after which it will receive no more updates. While in Maintenance Mode, the libraries will only receive updates for **critical bug fixes and security vulnerabilities**. Refer to [Amplify Documentation](https://docs.amplify.aws/reference/maintenance-policy) for more information on the maintenance policy. If you are using AWS Amplify UI library that depends on AWS Amplify JavaScript library v4 and below, we strongly recommend upgrading to the latest AWS Amplify UI library before April 13, 2026. ## Frequently asked questions **What are the major benefits of Amplify UI?** - **Better developer experience** Connected-components like Authenticator are being written with framework-specific implementations so that they follow framework conventions and are easier to integrate into your application. - **Endlessly customizable** Every detail of Amplify UI is customizable to match your brand. Style all of Amplify UI with themes, override components with your own, or build your own UI and use Amplify for complex state management. - **Accessible** Amplify UI components follow [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) and [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) best practices and guidelines such as color contrast, keyboard navigation, accessible labels, and focus management. - **Primitive components (React only right now)** Primitive components are used in the connected components, like Authenticator, you can also customize them and use them to build the rest of your UI. **How does this compare to other UI libraries like Tailwind, Chakra, Supabase, or Material-UI?** Amplify UI consists of both primitive components like Buttons, Badges, and Cards, as well as cloud-connected and data-bound components like the Authenticator. We are taking heavy inspiration from open-source frameworks like [Tailwind](https://tailwindcss.com/), [Chakra](https://chakra-ui.com/), [Supabase](https://ui.supabase.io/), [Radix](https://www.radix-ui.com/), [Adobe Spectrum](https://react-spectrum.adobe.com/), [Material-UI](https://material-ui.com/), and others. In fact, one of the core ideas with the new Amplify UI is the ability to integrate seamlessly into _any_ application, including ones using those UI frameworks. For example, you can use Tailwind classes to style Amplify UI components or Chakra components like buttons inside Amplify connected-components like the Authenticator. **Where should I file bugs and requests?** [Bugs and feature requests for Amplify UI](https://github.com/aws-amplify/amplify-ui/issues/new) You can also use the above link to report a bug or a feature request for previous version of Amplify UI Components. As we continue to work on the new Amplify UI we will move UI-related issues in the amplify-js repository over here to work on them. We will continue to maintain major bug and security fixes for all existing UI packages and versions. New development for UI components will happen in this repository and eventually be published under the `@react` npm tag. ## We love contributors!! See our contributing guide [CONTRIBUTING.md](/CONTRIBUTING.md) to help us scale Amplify UI! --- ## License Note Although this repository is released and licensed under the Apache License (see [LICENSE](./LICENSE)), devDependencies of some packages (namely: [docs](./docs), the [next-example](./examples/next) as well as the [next-app-router example](./examples/next-app-router)) transitively use the third party [sharp](https://sharp.pixelplumbing.com/) project through NEXT.js The sharp projects prebuilt binaries' licensing includes [LGPL-2.1](https://opensource.org/license/LGPL-2.1) and [LGPL-3.0-or-later](https://opensource.org/license/LGPL-3.0) licenses

JavaScript Libraries & Components Design Systems & Tokens

1.1K Github Stars

amplify-flutter

![AWS Amplify](https://s3.amazonaws.com/aws-mobile-hub-images/aws-amplify-logo.png) [![discord](https://img.shields.io/discord/308323056592486420?logo=discord)](https://discord.gg/jWVbPfC) ## Amplify Flutter AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service. See [AWS Amplify](https://docs.amplify.aws) for further details about the Amplify Framework. We are iterating and looking for feedback and collaboration, so please [**let us know your feedback**](https://github.com/aws-amplify/amplify-flutter/issues/5) on our direction and roadmap. [Getting Started Guide](https://docs.amplify.aws/start/getting-started/setup/q/integration/flutter) ⚠️ **Amplify Flutter v1 is deprecated as of April 30th, 2025. No new features or bug fixes will be added. Dependencies may become outdated and potentially introduce compatibility issues.** Please use the latest version (Gen 2) of Amplify Flutter. If you are currently using v1, follow [these instructions](https://docs.amplify.aws/lib/project-setup/upgrade-guide/q/platform/flutter/) to upgrade to v2. ## Supported Amplify Libraries | Library | pub.dev package | Description | | :------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [**Authentication**](https://docs.amplify.aws/lib/auth/getting-started/q/platform/flutter) | <a href="https://pub.dev/packages/amplify_auth_cognito" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_auth_cognito.svg"> </a> | APIs and building blocks for developers who want to create user authentication experiences with Amazon Cognito. | | [**Analytics**](https://docs.amplify.aws/lib/analytics/getting-started/q/platform/flutter) | <a href="https://pub.dev/packages/amplify_analytics_pinpoint" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_analytics_pinpoint.svg"></a> | Easily collect analytics data for your app with Pinpoint. Analytics data includes user sessions and other custom events that you want to track in your app. | | [**Storage**](https://docs.amplify.aws/lib/storage/getting-started/q/platform/flutter) | <a href="https://pub.dev/packages/amplify_storage_s3" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_storage_s3.svg"> </a> | Provides a simple mechanism for managing user content for your app in public, protected or private storage buckets with Amazon S3. | | [**DataStore**](https://docs.amplify.aws/lib/datastore/getting-started/q/platform/flutter) | <a href="https://pub.dev/packages/amplify_datastore/versions/1.1.0-supports-only-mobile" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_datastore?include_prereleases"> </a> | A programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data. | | [**API (REST)**](https://docs.amplify.aws/lib/restapi/getting-started/q/platform/flutter) | <a href="https://pub.dev/packages/amplify_api" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_api.svg"> </a> | Provides a simple solution when making HTTP requests. It provides an automatic, lightweight signing process which complies with AWS Signature Version 4. | | [**API (GraphQL)**](https://docs.amplify.aws/flutter/build-a-backend/data/) | <a href="https://pub.dev/packages/amplify_api" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_api.svg"> </a> | Interact with your GraphQL server or AWS AppSync API with an easy-to-use & configured GraphQL client. | | [**Notifications**](https://docs.amplify.aws/lib/push-notifications/getting-started/q/platform/flutter) | <a href="https://pub.dev/packages/amplify_push_notifications_pinpoint" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_push_notifications_pinpoint.svg"> </a> | Trigger push notifications to your app and record metrics in Pinpoint when users receive or open notifications. | | [**Authenticator**](https://ui.docs.amplify.aws/flutter/connected-components/authenticator) | <a href="https://pub.dev/packages/amplify_authenticator" target="_blank"> <img src="https://img.shields.io/pub/v/amplify_authenticator.svg"> </a> | The Amplify Flutter Authenticator simplifies the process of authenticating users by providing a fully-customizable flow which just works. Simply wrap your app's authenticated route in an Authenticator component and the process of authenticating users and managing login sessions is handled for you. | ### Semantic versioning We follow [semantic versioning](https://dart.dev/tools/pub/versioning#semantic-versions) for our releases. #### Semantic versioning and enumeration cases When Amplify adds a new enumeration entry or sealed class subtype, we will publish a new **minor** version of the library. Applications that use a `switch` statement to evaluate all members of an enumerated type can add a `default` clause to prevent new cases from causing compile warnings or errors. #### Semantic versioning and dependencies update We follow [semantic versioning for updating our dependencies](https://semver.org/#what-should-i-do-if-i-update-my-own-dependencies-without-changing-the-public-api). This includes updating the dart and flutter SDK version. ## Category / Platform Support | Category | Android | iOS | Web | Windows | MacOS | Linux | | -------------- | :-----: | :-: | :-: | :-----: | :---: | :---: | | Analytics | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | API (REST) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | API (GraphQL) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | Authentication | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | DataStore | ✅ | ✅ | 🔴 | 🔴 | 🔴 | 🔴 | | Storage | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | Notifications | ✅ | ✅ | 🔴 | 🔴 | 🔴 | 🔴 | ## Documentation - [Getting Started with Amplify Flutter](https://docs.amplify.aws/flutter/start/quickstart/) - [Amplify Framework](https://docs.amplify.aws/) - [Contributing to Amplify Flutter](CONTRIBUTING.md) ## Flutter Development Guide Amplify for Flutter is an open-source project and welcomes contributions from the Flutter community, see [Contributing](CONTRIBUTING.md). #### Prerequisites - [Flutter](https://flutter.dev/docs/get-started/install) - Node.js v18.17 or later - npm v9 or later #### Getting Started With Amplify Flutter 1. Open your Flutter project. If you do not have an active Flutter project, you can create one after installing the [Flutter development tooling](https://flutter.dev/docs/get-started/install) and running `flutter create <project-name>` in your terminal. 2. Run the following to create an amplify project: `npm create amplify@latest -y` 4. To use the Authenticator, you need to add the following dependencies to your project: ```yaml dependencies: amplify_auth_cognito: ^2.0.0 amplify_authenticator: ^2.0.0 amplify_flutter: ^2.0.0 flutter: sdk: flutter ``` 5. run `flutter pub get` 6. Update your main.dart file to the following: ```dart import 'package:amplify_auth_cognito/amplify_auth_cognito.dart'; import 'package:amplify_authenticator/amplify_authenticator.dart'; import 'package:amplify_flutter/amplify_flutter.dart'; import 'package:flutter/material.dart'; import 'amplify_outputs.dart'; Future<void> main() async { try { WidgetsFlutterBinding.ensureInitialized(); await _configureAmplify(); runApp(const MyApp()); } on AmplifyException catch (e) { runApp(Text("Error configuring Amplify: ${e.message}")); } } Future<void> _configureAmplify() async { try { await Amplify.addPlugin(AmplifyAuthCognito()); await Amplify.configure(amplifyConfig); safePrint('Successfully configured'); } on Exception catch (e) { safePrint('Error configuring Amplify: $e'); } } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return Authenticator( child: MaterialApp( builder: Authenticator.builder(), home: const Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SignOutButton(), Text('TODO Application'), ], ), ), ), ), ); } } ``` 7. Deploy your backend use Amplify's per-developer cloud sandbox. This feature provides a separate backend environment for every developer on a team, ideal for local development and testing. To run your application with a sandbox environment, you can run the following command: `npx ampx sandbox --outputs-format dart --outputs-out-dir lib` 8. Since Amplify Flutter supports 6 platforms with Flutter including iOS, Android, Web, and Desktop, some extra configuration may be required for each platform. Check out the [Platform Setup](https://docs.amplify.aws/flutter/start/platform-setup/) guide to make sure you've completed the necessary steps. 9. Run `flutter run` to launch your app on the connected device. Congratulations, you've built your first Amplify app! 🎉 For further documentation and Amplify Category usage, see the [documentation](https://docs.amplify.aws/flutter/). --- Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.

Mobile Development Backend as a Service

1.4K Github Stars

amplify-js

<img src="https://s3.amazonaws.com/aws-mobile-hub-images/aws-amplify-logo.png" alt="AWS Amplify" width="550" > [![current aws-amplify package version](https://img.shields.io/npm/v/aws-amplify?color=brightgreen&label=npm%20package)](https://www.npmjs.com/package/aws-amplify) [![weekly downloads](https://img.shields.io/npm/dw/aws-amplify)](https://www.npmjs.com/package/aws-amplify) [![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/aws-amplify/amplify-js/push-main-release.yml) ](https://github.com/aws-amplify/amplify-js/blob/main/.github/workflows/push-main-release.yml) [![code coverage](https://codecov.io/gh/aws-amplify/amplify-js/branch/main/graph/badge.svg)](https://codecov.io/gh/aws-amplify/amplify-js) [![join discord](https://img.shields.io/discord/308323056592486420?logo=discord)](https://discord.gg/jWVbPfC) ### Reporting Bugs / Feature Requests [![Open Bugs](https://img.shields.io/github/issues/aws-amplify/amplify-js/bug?color=d73a4a&label=bugs)](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+is%3Aopen+label%3Abug) [![Feature Requests](https://img.shields.io/github/issues/aws-amplify/amplify-js/feature-request?color=ff9001&label=feature%20requests)](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+label%3Afeature-request+is%3Aopen) [![Closed Issues](https://img.shields.io/github/issues-closed/aws-amplify/amplify-js?color=%2325CC00&label=issues%20closed)](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+is%3Aclosed+) > **Note** > aws-amplify 6 has been released. If you are looking for upgrade guidance [click here](#notice) > **⚠️ Deprecation Notice** > **All AWS Amplify JavaScript library versions other than v5 and v6 are deprecated.** > Only **v5.x.x** and **v6.x.x** are actively supported. Versions **v4 and below** are deprecated. If you are using any version other than v5 or v6, we strongly recommend upgrading to v6 as soon as possible. ### AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow and React Native for mobile developers. Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service. #### Visit our [documentation site](https://docs.amplify.aws/) to learn more about AWS Amplify. Please see the [Amplify JavaScript](https://docs.amplify.aws/lib/q/platform/js/) page for information around the full list of features we support. - [Contributing](https://github.com/aws-amplify/amplify-js/blob/main/CONTRIBUTING.md) ### Features | Category | AWS Provider | Description | | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | [**Authentication**](https://docs.amplify.aws/lib/auth/getting-started/q/platform/js) | [Amazon Cognito](https://aws.amazon.com/cognito/) | APIs and Building blocks to create Authentication experiences. | | [**Analytics**](https://docs.amplify.aws/lib/analytics/getting-started/q/platform/js) | [Amazon Pinpoint](https://aws.amazon.com/pinpoint/) | Collect Analytics data for your application including tracking user sessions. | | [**REST API**](https://docs.amplify.aws/lib/restapi/getting-started/q/platform/js) | [Amazon API Gateway](https://aws.amazon.com/api-gateway/) | Sigv4 signing and AWS auth for API Gateway and other REST endpoints. | | [**GraphQL API**](https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js) | [AWS AppSync](https://aws.amazon.com/appsync/) | Interact with your GraphQL or AWS AppSync endpoint(s). | | [**DataStore**](https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js) | [AWS AppSync](https://aws.amazon.com/appsync/) | Programming model for shared and distributed data, with simple online/offline synchronization. | | [**Storage**](https://docs.amplify.aws/lib/storage/getting-started/q/platform/js) | [Amazon S3](https://aws.amazon.com/s3/) | Manages content in public, protected, private storage buckets. | | [**Geo (Developer preview)**](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js) | [Amazon Location Service](https://aws.amazon.com/location/) | Provides APIs and UI components for maps and location search for JavaScript-based web apps. | | [**Push Notifications**](https://docs.amplify.aws/lib/push-notifications/getting-started/q/platform/js) | [Amazon Pinpoint](https://aws.amazon.com/pinpoint/) | Allows you to integrate push notifications in your app with Amazon Pinpoint targeting and campaign management support. | | [**Interactions**](https://docs.amplify.aws/lib/interactions/getting-started/q/platform/js#interactions-with-aws) | [Amazon Lex](https://aws.amazon.com/lex/) | Create conversational bots powered by deep learning technologies. | | [**PubSub**](https://docs.amplify.aws/lib/pubsub/getting-started/q/platform/js) | [AWS IoT](https://aws.amazon.com/iot/) | Provides connectivity with cloud-based message-oriented middleware. | | [**Internationalization**](https://docs.amplify.aws/lib/utilities/i18n/q/platform/js) | --- | A lightweight internationalization solution. | | [**Cache**](https://docs.amplify.aws/lib/utilities/cache/q/platform/js) | --- | Provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings. | | [**Predictions**](https://docs.amplify.aws/lib/predictions/getting-started/q/platform/js) | Various\* | Connect your app with machine learning services like NLP, computer vision, TTS, and more. | - Predictions utilizes a range of Amazon's Machine Learning services, including: Amazon Comprehend, Amazon Polly, Amazon Rekognition, Amazon Textract, and Amazon Translate. ## Getting Started AWS Amplify is available as `aws-amplify` on [npm](https://www.npmjs.com/package/aws-amplify). To get started pick your platform from our [**Getting Started** home page](https://docs.amplify.aws/javascript/) ## Version Support AWS Amplify JavaScript library v4 and below will end support on **April 13, 2026**, as documented in our [AWS Amplify JavaScript library version support calendar](https://github.com/aws-amplify/amplify-js/issues/14580). Effective immediately, the AWS Amplify JavaScript library v4 and below will enter **Maintenance Mode** until April 13, 2026 after which it will receive no more updates. While in Maintenance Mode, the libraries will only receive updates for **critical bug fixes and security vulnerabilities**. Refer to [Amplify Documentation](https://docs.amplify.aws/reference/maintenance-policy) for more information on the maintenance policy. If you are using AWS Amplify JavaScript library v4 and below, we strongly recommend upgrading to the AWS Amplify JavaScript Library v6 before April 13, 2026. ## Notice: ### Amplify 6.x.x has breaking changes. Please see the breaking changes on our [migration guide](https://docs.amplify.aws/javascript/build-a-backend/troubleshooting/migrate-from-javascript-v5-to-v6/) ### Amplify 5.x.x has breaking changes. Please see the breaking changes below: - If you are using **default exports** from any Amplify package, then you will need to migrate to using named exports. For example: ```diff - import Amplify from 'aws-amplify'; + import { Amplify } from 'aws-amplify' - import Analytics from '@aws-amplify/analytics'; + import { Analytics } from '@aws-amplify/analytics'; // or better + import { Analytics } from 'aws-amplify'; - import Storage from '@aws-amplify/storage'; + import { Storage } from '@aws-amplify/storage'; // or better + import { Storage } from 'aws-amplify'; ``` - Datastore predicate syntax has changed, impacting the `DataStore.query`, `DataStore.save`, `DataStore.delete`, and `DataStore.observe` interfaces. For example: ```diff - await DataStore.delete(Post, (post) => post.status('eq', PostStatus.INACTIVE)); + await DataStore.delete(Post, (post) => post.status.eq(PostStatus.INACTIVE)); - await DataStore.query(Post, p => p.and( p => [p.title('eq', 'Amplify Getting Started Guide'), p.score('gt', 8)])); + await DataStore.query(Post, p => p.and( p => [p.title.eq('Amplify Getting Started Guide'), p.score.gt(8)])); ``` - To use the new syntax with 5.x.x you may need to rebuild your Datastore models with the latest version of Amplify codegen. To do this: - [Upgrade the Amplify CLI](https://docs.amplify.aws/cli/start/workflows/#upgrade-amplify-cli) - `npm install -g @aws-amplify/cli` - [Re-generate your models with Amplify codegen](https://docs.amplify.aws/lib/datastore/getting-started/q/platform/js/#code-generation-amplify-cli) - `amplify codegen models` - `Storage.list` has changed the name of the `maxKeys` parameter to `pageSize` and has a new return type that contains the results list. For example: ```diff - const photos = await Storage.list('photos/', { maxKeys: 100 }); - const { key } = photos[0]; + const photos = await Storage.list('photos/', { pageSize: 100 }); + const { key } = photos.results[0]; ``` - `Storage.put` with resumable turned on has changed the key to no longer include the bucket name. For example: ```diff - let uploadedObjectKey; - Storage.put(file.name, file, { - resumable: true, - // Necessary to parse the bucket name out to work with the key - completeCallback: (obj) => uploadedObjectKey = obj.key.substring( obj.key.indexOf("/") + 1 ) - } + let uploadedObjectKey; + Storage.put(file.name, file, { + resumable: true, + completeCallback: (obj) => uploadedObjectKey = obj.key + } ``` - `Analytics.record` no longer accepts string as input. For example: ```diff - Analytics.record('my example event'); + Analytics.record({ name: 'my example event' }); ``` - The `JS` export has been removed from `@aws-amplify/core` in favor of exporting the functions it contained. - Any calls to `Amplify.Auth`, `Amplify.Cache`, and `Amplify.ServiceWorker` are no longer supported. Instead, your code should use the named exports. For example: ```diff - import { Amplify } from 'aws-amplify'; - Amplify.configure(...); - // ... - Amplify.Auth.signIn(...); + import { Amplify, Auth } from 'aws-amplify'; + Amplify.configure(...); + // ... + Auth.signIn(...); ``` ### DataStore Docs For more information on contributing to DataStore / how DataStore works, see the [DataStore Docs](packages/datastore/README.md)

JavaScript Libraries & Components Mobile Development

9.6K Github Stars

Software by aws-amplify

amplify-ui

amplify-flutter

amplify-js