/

<ProductDownloadsPage> Component

The <ProductDownloadsPage> component renders a standardized downloads page used across each of HashiCorp's product documentation websites.

Share
Code Editor

Full usage example:

import ProductDownloadsPage from '@hashicorp/react-product-downloads-page'
import { generateStaticProps } from '@hashicorp/react-product-download-page/server'

export default function DownloadsPage(staticProps) {
  return (
    <ProductDownloadsPage
      logo={<img alt="Vault" src={require('./img/logo.svg')} />}
      merchandisingSlot={<p>...</p>}
      tutorialLink={{
        label: 'Example',
        href: '<url>',
      }}
      getStartedDescription="Follow step-by-step tutorials on the essentials of Vault."
      getStartedLinks={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      containers={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      tutorials={[
        {
          label: 'Example',
          href: '<url>',
        },
      ]}
      changelog="<url>"
      {...staticProps}
    />
  )
}

export const getStaticProps = generateStaticProps({
  product: 'vault',
  latestVersion: '1.0.0',
})
import ProductDownloadsPage from '@hashicorp/react-product-downloads-page'import { generateStaticProps } from '@hashicorp/react-product-download-page/server' export default function DownloadsPage(staticProps) {  return (    <ProductDownloadsPage      logo={<img alt="Vault" src={require('./img/logo.svg')} />}      merchandisingSlot={<p>...</p>}      tutorialLink={{        label: 'Example',        href: '<url>',      }}      getStartedDescription="Follow step-by-step tutorials on the essentials of Vault."      getStartedLinks={[        {          label: 'Example',          href: '<url>',        },      ]}      containers={[        {          label: 'Example',          href: '<url>',        },      ]}      tutorials={[        {          label: 'Example',          href: '<url>',        },      ]}      changelog="<url>"      {...staticProps}    />  )} export const getStaticProps = generateStaticProps({  product: 'vault',  latestVersion: '1.0.0',})

Where it's used

Latest:2.5.2
Search with

Releases

Latest:2.5.2
registry.npmjs.org
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...

Props

NameDescription
pageTitle
string
Override the default constructed page title. Useful if the download page is for a non-product release asset, such as Vagrant's vmware utility.
releases*
object
API response from releases endpoint
packageManagersOverrides*
array
object containing array of package managers (and associated commands), grouped by OS
Array members must be of the type below:
packageManagersOverrides[x]
object
Object contains nested props, see below:
packageManagersOverrides[x].label
string
human readable name of the package manager
packageManagersOverrides[x].url
string
package manager informational link url, used in release information section
packageManagersOverrides[x].commmands
array
array of commands. each array index is rendered on a new line
packageManagersOverrides[x].os
string
which operating system this package manager is for
Options: "darwin", "freebsd", "openbsd", "netbsd", "archlinux", "linux", "windows"
showPackageManagers
boolean
defaults to true, if set to false it will hide all package manager information
product*
string
A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
changelog
string
custom changelog URL
latestVersion*
string
latest version of the product
tutorialLink
object
link to the product tutorial
Object contains nested props, see below:
tutorialLink.href
string
location of the link
tutorialLink.label
string
link text
merchandisingSlot
React.Element
component to be rendered underneath the downloader cards
logo*
React.Element
product logo
getStartedLinks
array
links in the "Get Started" section
Array members must be of the type below:
getStartedLinks[x]
object
Object contains nested props, see below:
getStartedLinks[x].href
text
location of the link
getStartedLinks[x].label
string
link text
getStartedDescription
string
description of the "Get Started" section
containers
array
links to package containers
Array members must be of the type below:
containers[x]
object
Object contains nested props, see below:
containers[x].href
string
location of the link
containers[x].label
string
link text
tutorials
array
links to tutorials
Array members must be of the type below:
tutorials[x]
object
Object contains nested props, see below:
tutorials[x].href
text
location of the link
tutorials[x].label
string
link text