@aws-amplify/ui-react

What is @aws-amplify/ui-react?

@aws-amplify/ui-react is a library that provides a set of React components and utilities to help developers build cloud-enabled applications using AWS Amplify. It simplifies the integration of AWS services such as authentication, storage, and API interactions into React applications.

What are @aws-amplify/ui-react's main functionalities?

Authentication

Provides components for user authentication, including sign-in, sign-up, and sign-out functionalities.

import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

function App() {
  return (
    <AmplifyAuthenticator>
      <div>
        <h1>My App</h1>
        <AmplifySignOut />
      </div>
    </AmplifyAuthenticator>
  );
}

Storage

Enables file storage and retrieval using AWS S3. This example demonstrates how to upload a file to S3.

import { Storage } from 'aws-amplify';

async function uploadFile(file) {
  try {
    await Storage.put('example.txt', file, {
      contentType: 'text/plain'
    });
    console.log('File uploaded successfully');
  } catch (error) {
    console.error('Error uploading file:', error);
  }
}

API

Facilitates API interactions with AWS services. This example shows how to fetch data from an API endpoint.

import { API } from 'aws-amplify';

async function fetchData() {
  try {
    const data = await API.get('myApiName', '/items');
    console.log('Data fetched successfully:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

Other packages similar to @aws-amplify/ui-react

react-admin

react-admin is a frontend framework for building admin applications on top of REST/GraphQL APIs. It provides a set of components and hooks for managing data, authentication, and more. Compared to @aws-amplify/ui-react, react-admin is more focused on admin interfaces and offers extensive customization options.

firebase

Firebase is a platform developed by Google for creating mobile and web applications. It offers a variety of services including authentication, real-time databases, and cloud storage. While @aws-amplify/ui-react is tailored for AWS services, Firebase provides a similar set of functionalities but is integrated with Google's cloud infrastructure.

auth0-react

auth0-react is a library for integrating Auth0 authentication into React applications. It provides hooks and components for managing user authentication and authorization. Unlike @aws-amplify/ui-react, which offers a broader range of AWS services, auth0-react is specialized in authentication and identity management.

README

Amplify UI

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.

React Documentation

• https://ui.docs.amplify.aws/react

Features 🚀

• 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 and WAI-ARIA 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.

We love contributors!!

See our contributing guide CONTRIBUTING.md to help us scale Amplify UI!