IndexField

IndexField

Table of Contents

• Description
• Code
• Parameters
  • renderItem
• Code Sandbox

Description

The IndexField provides an easy way to link to childpages of a slug or to fetch data of childpages and build cards on any page in your project. It is not possible to edit the text on these components for that job please look at our StreamField.

Code

import {IndexField} from '@snek-at/jaen'

const Component = (): JSX.Element => (
  return(
    <>
      <IndexField 
        fixedSlug="yourSlug"
        outerElement={() => <YourHtmlTag />}
        renderItem={(item, key, navigate) => (
          return(
            <>
              <div key={key}>
                <button onClick={navigate}>
                  {item.title}
                </button>
              </div>
            </>
          )
        )}
        />
    </>
  )
)

Parameters

Property	Type	Required	Description
fixedSlug	string	no	If fixedSlug is not specified the IndexField will take the children of the current page. It allows you to decide which pages children are used.
outerElement	function	yes	The outerElement allows you to wrap your cards, buttons or more into a div, Flex etc. in order to position the elements correctly on your page.
renderItem	function	yes	renderItem allows you to build React-Components of any kind.

renderItem

Property	Type	Description
item	object	item.slug Slug holds the slug of the current childpage. This property can be used to fetch data from the current childpage to build cards. item.title Title provides you with the title of the current childpage. This can be used to fill buttons our links.
key	number	The key should be used to give fill the key parameter of the html tags.
navigate	function	navigate can be used to fill an onClick event on buttons or links to link to the current childpage.

Code Sandbox

WIP