https://availity.github.io/availity-react/assets/js/4c9bc1c2.1c65acf4.js

1"use strict";(self.webpackChunk_availity_dinosaurdocs=self.webpackChunk_availity_dinosaurdocs||[]).push([[2538],{5077(e,n,o){o.r(n),o.d(n,{assets:()=>a,contentTitle:()=>d,default:()=>h,frontMatter:()=>i,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"deprecated/bootstrap-components/spaces/spaces-link","title":"<SpacesLink />","description":"The `` component is used to handle the complexities of configuration navigation. This includes standard links, legacy SSO links, and Magneto SSO links.","source":"@site/docs/deprecated/bootstrap-components/spaces/spaces-link.md","sourceDirName":"deprecated/bootstrap-components/spaces","slug":"/deprecated/bootstrap-components/spaces/spaces-link","permalink":"/availity-react/deprecated/bootstrap-components/spaces/spaces-link","draft":false,"unlisted":false,"editUrl":"https://github.com/availity/availity-react/edit/master/docusaurus/docs/deprecated/bootstrap-components/spaces/spaces-link.md","tags":[],"version":"current","frontMatter":{"title":"<SpacesLink />"},"sidebar":"sidebar","previous":{"title":"<Space />","permalink":"/availity-react/deprecated/bootstrap-components/spaces/space"},"next":{"title":"useSpacesContext","permalink":"/availity-react/deprecated/bootstrap-components/spaces/use-spaces-context"}}');var s=o(4848),c=o(8453);const i={title:"<SpacesLink />"},d=void 0,a={},l=[{value:"Example",id:"example",level:2},{value:"Props",id:"props",level:2},{value:"<code>spaceId?: string</code>",id:"spaceid-string",level:3},{value:"<code>space?: SanitizedSpace</code>

1",id:"space-sanitizedspace",level:3},{value:"<code>clientId?: string</code>",id:"clientid-string",level:3},{value:"<code>tag?: React.ComponentType | string;</code>",id:"tag-reactcomponenttype--string",level:3},{value:"<code>bodyTag?: React.ComponentType | string;</code>",id:"bodytag-reactcomponenttype--string",level:3},{value:"<code>titleTag: React.ComponentType | string</code>",id:"titletag-reactcomponenttype--string",level:3},{value:"<code>textTag: React.ComponentType | string</code>",id:"texttag-reactcomponenttype--string",level:3},{value:"<code>linkStyle?: string</code>",id:"linkstyle-string",level:3},{value:"<code>icon?: boolean</code>",id:"icon-boolean",level:3},{value:"<code>description?: boolean</code>",id:"description-boolean",level:3},{value:"<code>appIcon?: boolean</code>",id:"appicon-boolean",level:3},{value:"<code>favorite?: boolean</code>",id:"favorite-boolean",level:3},{value:"<code>body?: boolean</code>",id:"body-boolean",level:3},{value:"<code>showDate?: boolean</code>",id:"showdate-boolean",level:3},{value:"<code>showNew?: boolean</code>",id:"shownew-boolean",level:3},{value:"<code>size?: string</code>",id:"size-string",level:3},{value:"<code>stacked?: boolean</code>",id:"stacked-boolean",level:3},{value:"<code>loading?: boolean</code>",id:"loading-boolean",level:3},{value:"<code>maxDescriptionLength?: number</code>

1",id:"maxdescriptionlength-number",level:3},{value:"<code>skeletonProps?: object</code>",id:"skeletonprops-object",level:3},{value:"<code>linkAttributes?: object</code>",id:"linkattributes-object",level:3},{value:"<code>children?: React.ReactNode | (spacesContext: SpacesContext) =&gt; ReactNode</code>",id:"children-reactreactnode--spacescontext-spacescontext--reactnode",level:4},{value:"<code>card: boolean</code>",id:"card-boolean",level:3},{value:"<code>role: string</code>",id:"role-string",level:3},{value:"<code>analytics: object</code>",id:"analytics-object",level:3}];function r(e){const n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",...(0,c.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"<SpacesLink />"})," component is used to handle the complexities of configuration navigation. This includes standard links, legacy SSO links, and Magneto SSO links."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"<SpacesLink />"}),' also includes some additional functionality. Top Apps can be updated on click. Configuration favoriting can be handled. A "New!" badge can be displayed based on the configuration\'s activeDate. Images and Icons can also be displayed.']}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["NOTE: Using ",(0,s.jsx)(n.code,{children:"<SpacesLink />"})," depends on ",(0,s.jsx)(n.a,{href:"https://tanstack.com/query/latest",children:(0,s.jsx)(n.code,{children:"@tanstack/react-query"})})]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-jsx",children:"import React from 'react';\nimport Spaces, { SpacesLink } from '@availity/spaces';\n\n<Spaces\n  spaceIds={['73162546201441126239486200007187']}\n  payerIds={['PayerID']}\n  clientId=\"my-client-id\"\n>\n  <SpacesLink spaceId=\"73162546201441126239486200007187\" body appIcon />\n</Spaces>;\n"})}),"\n",(0,s.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,s.jsx)(n.h3,{id:"spaceid-string",children:(0,s.jsx)(n.code,{children:"spaceId?: string"})}),"\n",(0,s.jsxs)(n.p,{children:["If no ",(0,s.jsx)(n.code,{children:"spaceId"})," is provided, the first space in the ",(0,s.jsx)(n.code,{children:"spaces"})," array is used. Note: This is only to be used when the Spaces provider should only ever contain a single space."]}),"\n",(0,s.jsx)(n.h3,{id:"space-sanitizedspace",children:(0,s.jsx)(n.code,{children:"space?: SanitizedSpace"})}),"\n",(0,s.jsx)(n.p,{children:"Use to directly pass a space to the component rather than have it fetched from the spaces API. This component does not have to be a child of a SpacesProvider."}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsxs)(n.p,{children:["Note: If you are wanting to take advantage of the sso links you will additionally need to pass the ",(0,s.jsx)(n.code,{children:"clientId"})," in."]}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"clientid-string",children:(0,s.jsx)(n.code,{children:"clientId?: string"})}),"\n",(0,s.jsx)(n.p,{children:"Required when space is not provided, or space is provided and space contains an sso link."}),"\n",(0,s.jsx)(n.h3,{id:"tag-reactcomponenttype--string",children:(0,s.jsx)(n.code,{children:"tag?: React.ComponentType | str

1ing;"})}),"\n",(0,s.jsx)(n.p,{children:"Tag to overwrite the root component rendered."}),"\n",(0,s.jsx)(n.h3,{id:"bodytag-reactcomponenttype--string",children:(0,s.jsx)(n.code,{children:"bodyTag?: React.ComponentType | string;"})}),"\n",(0,s.jsxs)(n.p,{children:["Tag to overwrite the body component that renders the title, description and date values. It defaults to ",(0,s.jsx)(n.code,{children:"CardBody"})," or ",(0,s.jsx)(n.code,{children:"div"})," depending on the value of the ",(0,s.jsx)(n.code,{children:"linkStyle"})," prop."]}),"\n",(0,s.jsx)(n.h3,{id:"titletag-reactcomponenttype--string",children:(0,s.jsx)(n.code,{children:"titleTag: React.ComponentType | string"})}),"\n",(0,s.jsxs)(n.p,{children:["Tag to overwrite the title component. If ",(0,s.jsx)(n.code,{children:"linkStyle"})," prop is set to ",(0,s.jsx)(n.code,{children:'"card"'}),", defaults to ",(0,s.jsx)(n.code,{children:"CardTitle"}),". If ",(0,s.jsx)(n.code,{children:"linkStyle"})," is set to ",(0,s.jsx)(n.code,{children:'"list"'}),", defaults to ",(0,s.jsx)(n.code,{children:"ListGroupItemHeading"}),". Otherwise, defaults to ",(0,s.jsx)(n.code,{children:"div"}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"texttag-reactcomponenttype--string",children:(0,s.jsx)(n.code,{children:"textTag: React.ComponentType | str

1ing"})}),"\n",(0,s.jsxs)(n.p,{children:["Tag to overwrite the text component. If ",(0,s.jsx)(n.code,{children:"linkStyle"})," prop is set to ",(0,s.jsx)(n.code,{children:'"card"'}),", defaults to ",(0,s.jsx)(n.code,{children:"CardText"}),". If ",(0,s.jsx)(n.code,{children:"linkStyle"})," is set to ",(0,s.jsx)(n.code,{children:'"list"'}),", defaults to ",(0,s.jsx)(n.code,{children:"ListGroupItemText"}),". Otherwise, defaults to ",(0,s.jsx)(n.code,{children:"div"}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"linkstyle-string",children:(0,s.jsx)(n.code,{children:"linkStyle?: string"})}),"\n",(0,s.jsxs)(n.p,{children:["When passed in, provides predefined styles for the component. Possible values are ",(0,s.jsx)(n.code,{children:"card"}),", and ",(0,s.jsx)(n.code,{children:"list"}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"icon-boolean",children:(0,s.jsx)(n.code,{children:"icon?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", renders an ",(0,s.jsx)(n.code,{children:"@availity/icon"})," next to the title if present on the space."]}),"\n",(0,s.jsx)(n.h3,{id:"description-boolean",children:(0,s.jsx)(n.code,{children:"description?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", renders the ",(0,s.jsx)(n.code,{children:"Spaces"})," description beneath the title."]}),"\n",(0,s.jsx)(n.h3,{id:"appicon-boolean",children:(0,s.jsx)(n.code,{children:"appIcon?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", renders an app icon to the left of the title and formats depending on the space information given."]}),"\n",(0,s.jsx)(n.h3,{id:"favorite-boolean",children:(0,s.jsx)(n.code,{children:"favorite?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", renders the ",(0,s.jsx)(n.code,{children:"FavoriteHeart"})," component to the left of the Component. Note, this does require you to have wrapped your component somewhere in the ",(0,s.jsx)(n.code,{children:"Favorites"})," Provider. This also requires the peerDependency ",(0,s.jsx)(n.a,{href:"https://tanstack.com/query/latest",children:(0,s.jsx)(n.code,{children:"@tanstack/react-query"})}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"body-boolean",children:(0,s.jsx)(n.code,{children:"body?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", renders the title, and allow for the description and date info to be added on. ",(0,s.jsx)(n.em,{children:"Default:"})," ",(0,s.jsx)(n.code,{children:"true"})]}),"\n",(0,s.jsx)(n.h3,{id:"showdate-boolean",children:(0,s.jsx)(n.code,{children:"showDate?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", renders the ",(0,s.jsx)(n.code,{children:"activeDate"})," of the space."]}),"\n",(0,s.jsx)(n.h3,{id:"shownew-boolean",children:(0,s.jsx)(n.code,{children:"showNew?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),', renders a "New!" badge if the ',(0,s.jsx)(n.code,{children:"activeDate"})," is less than 30 days old."]}),"\n",(0,s.jsx)(n.h3,{id:"size-string",children:(0,s.jsx)(n.code,{children:"size?: string"})}),"\n",(0,s.jsxs)(n.p,{children:["Adjusts the icon size of the ",(0,s.jsx)(n.code,{children:"AppIcon"})," if enabled."]}),"\n",(0,s.jsx)(n.h3,{id:"stacked-boolean",children:(0,s.jsx)(n.code,{children:"stacked?: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", renders the component vertically."]}),"\n",(0,s.jsx)(n.h3,{id:"loading-boolean",children:(0,s.jsx)(n.code,{children:"loading?: boolean"})}),"\n",(0,s.jsx)(n.p,{children:"Optionally pass in your own loading state for the component if you are managing the state yourself."}),"\n",(0,s.jsx)(n.h3,{id:"maxdescriptionlength-number",children:(0,s.jsx)(n.code,{children:"maxDescriptionLength?: number"})}),"\n",(0,s.jsx)(n.p,{children:"Allows the description length to be truncated."}),"\n",(0,s.jsx)(n.h3,{id:"skeletonprops-object",children:(0,s.jsx)(n.code,{children:"skeletonProps?: object"})}),"\n",(0,s.jsx)(n.p,{children:"Dimensions passed to loader to show while the image is loading."}),"\n",(0,s.jsx)(n.h3,{id:"linkattributes-object",children:(0,s.jsx)(n.code,{children:"linkAttributes?: object"})}),"\n",(0,s.jsxs)(n.p,{children:["Additional attributes you may want to tack onto the ",(0,s.jsx)(n.code,{children:"native-form"})," when submitting a SAML sso. i.e. ",(0,s.jsx)(n.code,{children:"spaceId"})," or ",(0,s.jsx)(n.code,{children:"sourceApplicationId"})]}),"\n",(0,s.jsx)(n.h4,{id:"children-reactreactnode--spacescontext-spacescontext--reactnode",children:(0,s.jsx)(n.code,{children:"children?: React.ReactNode | (spacesContext: SpacesContext) => ReactNode"})}),"\n",(0,s.jsx)(n.p,{children:"Children can be a react child or render prop."}),"\n",(0,s.jsx)(n.h3,{id:"card-boolean",children:(0,s.jsx)(n.code,{children:"card: boolean"})}),"\n",(0,s.jsxs)(n.p,{children:["When ",(0,s.jsx)(n.code,{children:"true"}),", utilizes the reactstrap ",(0,s.jsx)(n.code,{children:"Card"})," component for styling."]}),"\n",(0,s.jsx)(n.h3,{id:"role-string",children:(0,s.jsx)(n.code,{children:"role: string"})}),"\n",(0,s.jsxs)(n.p,{children:["Allows the role of the root component to be over

1written. If ",(0,s.jsx)(n.code,{children:"linkStyle"})," prop is set to ",(0,s.jsx)(n.code,{children:'"list"'}),', defaults to "listitem".']}),"\n",(0,s.jsx)(n.h3,{id:"analytics-object",children:(0,s.jsx)(n.code,{children:"analytics: object"})}),"\n",(0,s.jsxs)(n.p,{children:["When Analytics props are passed inside the analytics props, they will be passed down to the click item. For more information on Analytics props see: ",(0,s.jsx)(n.a,{href:"https://availity.github.io/sdk-js/resources/analytics#autotrack-logged-events",children:"Autotrack Logged Events"})]})]})}function h(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(r,{...e})}):r(e)}},8453(e,n,o){o.d(n,{R:()=>i,x:()=>d});var t=o(6540);const s={},c=t.createContext(s);function i(e){const n=t.useContext(c);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),t.createElement(c.Provider,{value:n},e.children)}}}]);