Skip to main content

React Components

This short tutorial gets you up and running with the Quiltt React Components.


AnchorSetup

To walk through this tutorial, we recommend that you scaffold a new React project locally with Create React App

Next, install the required dependencies:

# npm
npm install @quiltt/components@next
# yarn
yarn add install @quiltt/components@next

AnchorUse the Quiltt UI Components in React

Import the UI components you need into your app components.

Note: This example uses Apollo Client to run queries.

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { gql, useQuery } from '@apollo/client'
import { AccountList } from '@quiltt/components'
import '@quiltt/components/dist/index.css'
const Component = () => {
const GET_ACCOUNTS = {/* query */}
const { loading, error, data } = useQuery(GET_ACCOUNTS)
if (loading) return <p>Loading...</p>
if (error) throw error
return (
<main>
<ul>
{data.plaidItems.map((item) => {
const { accounts } = item
return (
<li key={item.id}>
<div>
<div>
{item.logo && item.logo.url ? (
<img src={item.logo.url} alt={item.name} />
) : null}
<h2>
{item.name}
</h2>
</div>
</div>
{accounts.length ? <AccountList accounts={accounts} /> : null}
</li>
)
})}
</ul>
</main>
)
}
export default Component