Skip to main content

decoupled-kit-js

Interfaces

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.ts:39


Parent

Ƭ Parent: "parent" | "parentId"

Defined in

packages/nextjs-kit/src/types.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

NameTypeDescription
propsContentPropsThe 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/@[email protected]/node_modules/@types/react/ts5.0/index.d.ts:515


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

NameTypeDescription
propsFooterMenuPropsThe 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/@[email protected]/node_modules/@types/react/ts5.0/index.d.ts:515


Grid

Grid(«destructured»): Element

Parameters

NameType
«destructured»Object
› children?ReactNode
› 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:8


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

This is a Header component.

Example

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

Parameters

NameTypeDescription
propsHeaderPropsThe 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/@[email protected]/node_modules/@types/react/ts5.0/index.d.ts:515


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

NameType
Typeextends object

Parameters

NameTypeDescription
propsPaginationProps<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

NameType
propsPreviewRibbonProps
context?any

Returns

null | ReactElement<any, any>

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/ts5.0/index.d.ts:515


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

NameTypeDescription
propsRecipePropsThe 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/@[email protected]/node_modules/@types/react/ts5.0/index.d.ts:515


sortChar

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

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

Parameters

NameType
sortObjSortOptions

Returns

Record<string, string | number>[]

An array of data sorted by the given key and direction

Defined in

packages/nextjs-kit/src/utils/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

NameType
sortObjSortOptions

Returns

Record<string, string | number>[]

An array of data sorted by the given key and direction

Defined in

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


withGrid

withGrid<Props>(Component): <Type>(__namedParameters: { FallbackComponent?: ComponentType<{}> ; cols?: number ; data?: Type[] } & { [Property in string | number | symbol]: Props[Property] }) => 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>}
/>
</>
)
}

Type parameters

NameType
Propsextends object

Parameters

NameTypeDescription
ComponentComponentType<{}>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>(«destructured»): Element

Default

3

Type parameters
NameType
Typeextends object
Parameters
NameType
«destructured»{ FallbackComponent?: ComponentType<{}> ; cols?: number ; data?: Type[] } & { [Property in string | number | symbol]: Props[Property] }
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:59