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