Amplified-test NPM

🎣 Amplified

AWS Amplify libraries wrapped with React hooks.

Getting started

Install

yarn add amplified

Wrap your application with <AmplifyProvider />

import React from "react";
import ReactDOM from "react-dom";
import { AmplifyProvider } from "amplified";

import awsExports from "./aws-exports";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <AmplifyProvider config={awsExports}>
      <App />
    </AmplifyProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Libraries

Auth

`<Auth.Provider />`

If your are using authentication features in your app, wrap it with <Auth.Provider /> in order to react to authentication state changes.

Uses data fetching techniques to asynchronously get the current user.

Usage

import React from "react";
import ReactDOM from "react-dom";
import { AmplifyProvider, Auth } from "amplified";

import awsExports from "./aws-exports";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <AmplifyProvider config={awsExports}>
      <Auth.Provider>
        <App />
      </Auth.Provider>
    </AmplifyProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

`Auth.useCurrentUser(): CognitoUser | null`

Returns the current authenticated user, if any. Its value changes automatically according to the current authentication state.

⚠️ Your app must be wrapped with <Auth.Provider /> or you will get an error if you try to useCurrentUser.

Usage

import React from "react";
import { Auth } from "amplified";

import Authenticated from "views/authenticated";
import Unauthenticated from "views/unauthenticated";

const App: React.FC = () => {
  const currentUser = Auth.useCurrentUser();

  return currentUser ? (
    <div>Hola, {currentUser.getUsername()}</div>
  ) : (
    <div>Please sign in!</div>
  );
};

export default App;

Concepts

Data fetching techniques

All remote data fetching happens through SWR, a library created by the Vercel team that uses advanced cache invalidation strategies.

Enabling Suspense

You can enable Suspense for Data Fetching by passing enableSuspense prop to <AmplifyProvider />.

Example

import React from "react";
import ReactDOM from "react-dom";
import { AmplifyProvider } from "amplified";

import awsExports from "./aws-exports";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <React.Suspense fallback={<div>Loading</div>}>
      <AmplifyProvider enableSuspense config={awsExports}>
        <App />
      </AmplifyProvider>
    </React.Suspense>
  </React.StrictMode>,
  document.getElementById("root")
);

Async callbacks

An async callback is a hook that receives a promise as an argument and returns an array containing two items: the wrapped promise and an execution state object that contains:

isLoading: a boolean indicating if the promise is executing
result: result value from the promise, if it succeeded
error: error thrown from the promise, if it failed
wasSuccessful: a boolean indicating if the promise execution was successful