decoupled-kit-js

Interfaces

• ContentProps
• FooterMenuProps
• HeaderProps
• LinkProps
• PaginationProps
• PreviewRibbonProps
• RecipeProps
• SortOptions

Type Aliases

FooterMenuItem

Ƭ FooterMenuItem: LinkProps & { [key in Parent]?: string | null }

An item in a footer menu.

Remarks

This should account for Drupal and WordPress menus

Defined in

packages/nextjs-kit/src/types/index.ts:39

---

Parent

Ƭ Parent: "parent" | "parentId"

Defined in

packages/nextjs-kit/src/types/index.ts:33

Functions

ContentWithImage

▸ ContentWithImage(props, context?): null | ReactElement<any, any>

See

https://nextjs.org/docs/api-reference/next/image for more information.

Remarks

imageProps is an optional prop to be used if there is an image associated with the content. If imageProps.src is a supplied as a prop. Alt text is not required; however, it is strongly recommended to add alt text to all images for accessibility and SEO. If alt text is not supplied, the title of the content will be used.

Parameters

Name	Type	Description
props	PropsWithChildren<ContentProps>	The props needed for the ContentWithImage component
context?	any	-

Returns

null | ReactElement<any, any>

A component with a featured image and content passed by the user

Defined in

node_modules/.pnpm/@types+react@17.0.40/node_modules/@types/react/index.d.ts:550

---

Footer

▸ Footer(props, context?): null | ReactElement<any, any>

This is a Footer component.

Example

const footerMenuItems = [
 {
  href: '/',
  linkText: 'Home',
 },
{
 href: '/articles',
 linkText: 'Articles',
 parent: 'home',
},
...
 ]

Parameters

Name	Type	Description
props	PropsWithChildren<FooterMenuProps>	The props needed for the footer component
context?	any	-

Returns

null | ReactElement<any, any>

A footer component with a nav menu

Defined in

node_modules/.pnpm/@types+react@17.0.40/node_modules/@types/react/index.d.ts:550

---

Grid

▸ Grid(__namedParameters): Element

Parameters

Name	Type
__namedParameters	Object
__namedParameters.children?	Element[]
__namedParameters.cols?	number

Returns

Element

A style and positioning helper grid component that can be used with the withGrid HOC component

Defined in

packages/nextjs-kit/src/components/grid.tsx:10

---

Header

▸ Header(props, context?): null | ReactElement<any, any>

This is a Header component.

Example

const navItems = [
{
  linkText: 'Home',
  href: '/',
},
{
  linkText: 'Posts',
  href: '/posts',
},
...
 ]

Parameters

Name	Type	Description
props	PropsWithChildren<HeaderProps>	The props needed for the header component
context?	any	-

Returns

null | ReactElement<any, any>

A header component with a nav menu

Defined in

node_modules/.pnpm/@types+react@17.0.40/node_modules/@types/react/index.d.ts:550

---

Paginator

▸ Paginator<Type>(props): Element

See

https://github.com/pantheon-systems/decoupled-kit-js/tree/canary/starters/next-drupal-starter/pages/examples/pagination/[[...page]].js for a full example implementation

Example

<Paginator
  data={data}
  itemsPerPage={itemsPerPage}
  breakpoints={{ start: 6, end: 12, add: 6 }}
  routing
  Component={MyComponent}
/>

Type parameters

Name	Type
Type	extends object

Parameters

Name	Type	Description
props	PaginationProps<Type>	The props needed for the paginator component

Returns

Element

Component with data rendered by the passed in Component and page buttons

Defined in

packages/nextjs-kit/src/components/paginator.tsx:82

---

PreviewRibbon

▸ PreviewRibbon(props, context?): null | ReactElement<any, any>

Parameters

Name	Type
props	PropsWithChildren<PreviewRibbonProps>
context?	any

Returns

null | ReactElement<any, any>

Defined in

node_modules/.pnpm/@types+react@17.0.40/node_modules/@types/react/index.d.ts:550

---

Recipe

▸ Recipe(props, context?): null | ReactElement<any, any>

See

https://nextjs.org/docs/api-reference/next/image for more information.

Remarks

imageProps is an optional prop to be used if there is an image associated with the content. If imageProps.src is a supplied as a prop. Alt text is not required; however, it is strongly recommended to add alt text to all images for accessibility and SEO. If alt text is not supplied, the title of the content will be used.

Parameters

Name	Type	Description
props	PropsWithChildren<RecipeProps>	The props needed for the Recipe component
context?	any	-

Returns

null | ReactElement<any, any>

A recipe component with content and an optional image passed by the user

Defined in

node_modules/.pnpm/@types+react@17.0.40/node_modules/@types/react/index.d.ts:550

---

sortChar

▸ sortChar(sortObj): Record<string, string | number>[]

Sorts any character object on a specific key in a direction of the users choice.

Parameters

Name	Type
sortObj	SortOptions

Returns

Record<string, string | number>[]

An array of data sorted by the given key and direction

Defined in

packages/nextjs-kit/src/lib/sortChar.ts:12

---

sortDate

▸ sortDate(sortObj): Record<string, string | number>[]

Sorts any date field of an object on a specific key in a direction of the users choice.

Parameters

Name	Type
sortObj	SortOptions

Returns

Record<string, string | number>[]

An array of data sorted by the given key and direction

Defined in

packages/nextjs-kit/src/lib/sortDate.ts:11

---

withGrid

▸ withGrid(Component): <Type>(__namedParameters: { FallbackComponent?: ElementType<any> ; cols?: number ; data?: Type[] }) => Element

Remarks

The Component used must accept the data to be displayed as content to function properly

Example

const ArticleCard= ({ content }) => {
    return (
        <div>
            <h2>{content.title}</h2>
            <div>{content.excerpt}</div>
        </div>
    )
}

Example

const MyPage = ({ myArticles }) => {
 const ArticleGrid = withGrid(ArticleCard)
     return (
         <>
             <ArticleGrid
                 data={myArticles}
                 cols={4}
                 FallbackComponent={<span>No Data Found</span>}
             />
         </>
     )
}

Parameters

Name	Type	Description
Component	ElementType<any>	A component that takes in content that is to be displayed on the grid

Returns

fn

A Higher Order Component that returns the data mapped to the Component in a grid

▸ <Type>(__namedParameters): Element

Default

3

Type parameters

Name	Type
Type	extends object

Parameters

Name	Type
__namedParameters	Object
__namedParameters.FallbackComponent?	ElementType<any>
__namedParameters.cols?	number
__namedParameters.data?	Type[]

Returns

Element

The component passed to withGrid in a grid with the given number of columns

Defined in

packages/nextjs-kit/src/components/grid.tsx:61