<SpacesImage />
This component must be a descendent of the <Spaces/>
provider. Display an image based on the spaceId or payerId received from the <Spaces />
provider.
Example
import React from 'react';
import Spaces, {
SpacesLogo,
SpacesBillboard,
SpacesTile,
SpacesImage,
} from '@availity/spaces';
const Example = () => (
<Spaces
spaceIds={['73162546201441126239486200007187']}
payerIds={['PayerID']}
clientId="my-client-id"
>
<SpacesLogo spaceId="73162546201441126239486200007187" />
<SpacesBillboard payerId="PayerID" />
<SpacesTile payerId="PayerID" />
<SpacesImage payerId="PayerID" />
</Spaces>
);
Live example: Storybook
Props
spaceId?: string
Required if payerId
is not provided. The payer spaces ID of the payer to render the image for. If no spaceId
or payerId
is provided, the first space in the spaces
array is used. Note: This is only to be used when the Spaces provider should only ever contain a single space.
payerId?: string
Required if spaceId
is not provided. The payer ID of the payer to render the image for. If no spaceId
or payerId
is provided, the first space in the spaces
array is used. Note: This is only to be used when the Spaces provider should only ever contain a single space.
Note: If the payerId is associated with more than one payer space, the order in which they are returned should not be relied upon. If a specific payer space is required, you'll need to filter the list that is returned.
skeletonProps?: object
Dimensions passed to loader to show while the image is loading.
fallback?: string
The fallback image url to render if the url for the spaces image is not valid or not found
imageType?: string
The path on the space containing the image reference. Defaults to: "url"
.