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/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

NameTypeDescription
propsPropsWithChildren<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(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
propsPropsWithChildren<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

NameType
__namedParametersObject
__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(props, context?): null | ReactElement<any, any>

This is a Header component.

Example

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

Parameters

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

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
propsPropsWithChildren<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

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

NameType
sortObjSortOptions

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

NameType
sortObjSortOptions

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

NameTypeDescription
ComponentElementType<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
NameType
Typeextends object
Parameters
NameType
__namedParametersObject
__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