import all0 from "/src/fragments/ui/web/installation.mdx";

<Fragments fragments={{all: all0}} />

## Usage

<FilterContent framework="react">

```jsx
import React from "react";
import { Amplify } from "aws-amplify";
import { AmplifyS3Text } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

const App = () => <AmplifyS3Text textKey="example.txt" />;
```

</FilterContent>

<FilterContent framework="angular">

import all1 from "/src/fragments/ui/angular/configure-module.mdx";

<Fragments fragments={{all: all1}} />

_app.component.html_

```html
<amplify-s3-text text-key="example.txt"></amplify-s3-text>
```

</FilterContent>

<FilterContent framework="vue">

import all3 from "/src/fragments/ui/vue/configure-app.mdx";

<Fragments fragments={{all: all3}} />

_App.vue_

```html
<template>
  <amplify-s3-text text-key="example.txt" />
</template>
```

</FilterContent>

<UiComponentProps tag="amplify-s3-text" propType="attr" useTableHeaders></UiComponentProps>

<UiComponentProps tag="amplify-s3-text" propType="css" useTableHeaders></UiComponentProps>

```css
amplify-s3-text {
  --container-color: black;
  --text-color: deepskyblue;
}
```

## Use Cases

### Getting files from protected access level

Protected files from S3 bucket can be accessed by anyone other than the owner by using the `identityId` of the owner.

<FilterContent framework="react">

```jsx
const App = () => (
  <AmplifyS3Text
    level="protected"
    textKey="example.txt"
    identityId="us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"
  />
);
```

</FilterContent>

<FilterContent framework="angular">

_app.component.html_

```html
<amplify-s3-text
  level="protected"
  text-key="example.txt"
  identity-id="us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"
></amplify-s3-text>
```

</FilterContent>

<FilterContent framework="vue">

_App.vue_

```html
<template>
  <amplify-s3-text
    level="protected"
    text-key="example.txt"
    identity-id="us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"
  />
</template>
```

</FilterContent>

## Migration

To migrate from using the `aws-amplify-<framework>` library to the latest `@aws-amplify/ui-<framework>` library use the steps below:

import all4 from "/src/fragments/ui/web/installation-diff.mdx";

<Fragments fragments={{all: all4}} />

### Usage

<FilterContent framework="react">

```diff
- import { S3Text } from 'aws-amplify-react';
+ import { AmplifyS3Text } from '@aws-amplify/ui-react';

const App = () => (

+ <AmplifyS3Text textKey="example.txt" />
- <S3Text textKey="example.txt" />

);
```

</FilterContent>

<FilterContent framework="angular">

import all5 from "/src/fragments/ui/angular/configure-module-diff.mdx";

<Fragments fragments={{all: all5}} />

_app.component.html_

```diff
+ <amplify-s3-text text-key="example.txt"></amplify-s3-text>
- <s3-text text-key="example.txt"></s3-text>
```

</FilterContent>

<FilterContent framework="vue">

import all7 from "/src/fragments/ui/vue/configure-app-diff.mdx";

<Fragments fragments={{all: all7}} />

_App.vue_

```diff
 <template>
- <s3-text text-key="example.txt" />
+ <amplify-s3-text text-key="example.txt" />
 </template>
```

</FilterContent>

If you were using `S3Text` with `picker` property enabled, please see the documentation for [`S3TextPicker`](/ui/storage/s3-text-picker).