Amazon Web Services ブログ
AWS Amplify UI : 10 個の新しいコンポーネントと更新されたコンポーネント
AWS Amplify UI チームは、エンドユーザーのための機能豊富なアプリを構築するのに役立つ、8 つの新しい React ユーザーインターフェイスコンポーネントと 2 つの改良されたコンポーネントを紹介します。本記事では、新しいコンポーネントと、それらをプロジェクトにどのように使用できるかを紹介します。Amplify UI は、クラウドに接続されたクロスプラットフォームと、パフォーマンス、テーマ性、応答性、アクセシビリティに優れた React コンポーネントの両方を備えたコンポーネントライブラリです。
1. Fieldset
<Fieldset
legend="Favorite fruits"
variation="outlined"
direction="column">
<CheckboxField
label="Apple"
name="apple"
/>
<CheckboxField
label="Pear"
name="pear"
/>
</Fieldset>Fieldset は、アクセス可能な <legend> を伴う <fieldset> 要素をレンダリングする新しいコンポーネントです。Fieldset は、フォーム内の関連する要素をグループ化するために使用される HTML 要素です。例えば、チェックボックスのグループや、より大きなフォーム内に関連するフィールドを作成するために使用されます。以前は、独自のフィールドセットを作成し、スタイルを設定する必要がありましたが、Fieldset コンポーネントの導入により、このプロセスはより簡単になりました。
Fieldset はコンテキストプロバイダなので、Fieldset の無効状態は、Amplify UI のフォームコントロールとネストされた Fieldset に正しく受け継がれます。isDisabled プロパティを true に設定すると、Fieldset の子要素であるすべてのフォームフィールドが無効になります。
2. Input
<Input placeholder="placeholder" />
Input は <input> 要素が受け入れる標準的な HTML 属性のどれでも受け入れます。標準的な <input> 属性は MDN Documentation で確認することができます。Input プリミティブはテキスト入力専用にスタイルされています (テキスト、日付、数字など)。
3. Label
<Flex direction="column" gap="small">
<Label htmlFor="first_name">First Name:</Label>
<Input id="first_name" name="first_name" />
</Flex>
Labelは UI 要素のキャプションを表します。Label コンポーネントは Input コンポーネントと一緒に使うことで、独自のフォームフィールドを構成することができます。Label は、 <label> 要素が受け入れる標準的な HTML 属性を受け入れます。標準的な <label> 属性は MDN Documentation で確認することができます。
4. SelectField (更新)
<SelectField
label="Fruit"
descriptiveText="What's your favorite fruit?"
isMultiple={true}
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange" disabled>Orange</option>
<option value="pineapple">Pineapple</option>
<option value="kiwi">Kiwi</option>
<option value="tangerine">Tangerine</option>
</SelectField>
SelectField に isMultiple と selectSize プロパティが追加され、ユーザの選択を処理するための設定オプションが増えました。
5. Button (更新)
<Button
variation="primary"
colorTheme="success"
>
Click me!
</Button>
更新された Button コンポーネントでは、colorTheme プロパティがサポートされ、より多くのカラーバリエーションを柔軟に組み込むことができるようになりました。variation、size、colorTheme プロパティにより、54 種類のスタイルのボタンが用意されました！
6. Message
<Message
variation="plain"
colorTheme="neutral"
heading="A message heading">
Basic message content
</Message>
Message コンポーネントは Alert コンポーネントの後継です。Message はよりカスタマイズ可能で柔軟性があるため、アプリケーションのより多くの状況で使用することができます。Message にはデフォルトで ARIA ロールが設定されていません。使用するケースに応じて、role 属性を渡したり、必要に応じて独自の ARIA 属性を追加したりすることができます。Message コンポーネントには、メッセージのカラーバリエーションを増やす colorTheme プロパティがあります。colorTheme プロパティは、同名の buttonプロパティに似ています。
7. Breadcrumbs (パンくずリスト)
import { Breadcrumbs } from '@aws-amplify/ui-react';
export default function DefaultBreadcrumbsExample() {
return (
<Breadcrumbs
items={[
{
href: '/',
label: 'Home',
},
{
href: '/react/components',
label: 'Components',
},
{
label: 'Breadcrumbs',
},
]}
/>
);
}
Breadcrumbs コンポーネントは柔軟性があるので、レンダリングされるものを完全にコントロールすることができ、より高度なユースケースをアンロックすることができます。
<Breadcrumbs.Container><Breadcrumbs.Item><Breadcrumbs.Link><Breadcrumbs.Separator>
Breacrumbs コンポーネントを NextJS の Linkコンポーネントと useRouter コンポーネントと一緒に使うことで、現在のパスに基づいて Breadcrumbs を自動的に生成することができます。
import Link from 'next/link';
import { Breadcrumbs } from '@aws-amplify/ui-react';
import { useRouter } from 'next/router';
export default function NextBreadcrumbsExample() {
const { asPath } = useRouter();
const nestedRoutes = asPath
.split('#')[0]
.split('?')[0]
.split('/')
.filter((subpath) => subpath.length > 0);
const breadcrumbs = [
{ href: '/', text: 'Home' },
...nestedRoutes.map((subpath, i) => {
const href = '/' + nestedRoutes.slice(0, i + 1).join('/');
const text = subpath;
return { href, text };
}),
];
return (
<Breadcrumbs.Container>
{breadcrumbs.map(({ href, text }, i) => {
const isCurrent = i === breadcrumbs.length - 1;
return (
<Breadcrumbs.Item key={href}>
<Link href={href} passHref>
<Breadcrumbs.Link isCurrent={isCurrent}>{text}</Breadcrumbs.Link>
</Link>
{isCurrent ? null : <Breadcrumbs.Separator />}
</Breadcrumbs.Item>
);
})}
</Breadcrumbs.Container>
);
}
8. Dropzone
export default function DefaultDropZoneExample() {
const [files, setFiles] = React.useState([]);
return (
<>
<DropZone
onDropComplete={({ files }) => {
setFiles(files);
}}
>
Drag images here
</DropZone>
{files.map((file) => (
<Text key={file.name}>{file.name}</Text>
))}
</>
);
}
DropZone コンポーネントは、要素に必要なイベントハンドラを追加し、ファイルタイプによってドロップされたファイルをフィルタリングします。ドロップされた後のファイルを取得するには、files と rejectedFiles 配列を持つ関数である onDropComplete プロパティを使用できます。
9. IconsProvider
Amplify UI コンポーネントで使用するアイコンをカスタマイズするには、アプリケーションを IconProvider コンポーネントでラップし、変更したいアイコンを渡します。icons プロパティは、アイコンの名前を React コンポーネントにマッピングするオブジェクトでなければなりません。例えば、以下のように実装することが出来ます。
import { IconsProvider, Rating } from '@aws-amplify/ui-react';
import { FiStar } from 'react-icons/fi';
export default function IconProviderExample() {
return (
<IconsProvider
icons={{
rating: {
filled: <FiStar />,
empty: <FiStar />,
},
}}
>
<Rating value={3.5} />
</IconsProvider>
);
}
IconProvider コンポーネントは、React コンテキストを使用して、子コンポーネントがカスタムアイコンセットを利用できるようにします。IconProvider 内部のどのコンポーネントも、内部フックを介してカスタムアイコンにアクセスできます。アプリケーションの特定の部分でアイコンを変更したい場合は、他の React コンテキストと同じように、アプリケーションのさまざまな部分で IconsProvider をネストできます。
10. StorageImage
<StorageImage alt="cat" imgKey="cat.jpg" accessLevel="public" />
StorageImage コンポーネントは @aws-amplify/ui-react-storage パッケージの新しい Storage 接続コンポーネントで、Storage に保存された画像を簡単に表示するために使用できます。
まとめ
これら 10 個の新しいコンポーネントと更新されたコンポーネントにより、Amplify UI は React アプリケーションの構築と拡張においてより柔軟性と効率性を提供します。私たちは、アクセスしやすく、カスタマイズ可能で、ユーザーフレンドリーなアプリケーションを簡単に作成するために必要なツールを提供するために努力を続けています。他にもご希望のコンポーネントがありましたら、GitHub でお知らせください。
これらのコンポーネントやその他の Amplify UI の詳細については、ドキュメントをご覧ください。
本記事は、「AWS Amplify UI: 10 new and updated components」を翻訳したものです。