Component shortcodes

Vue and Svelte support is coming soon! For now, these docs will be React-specific.

Make sure you have react and react-dom installed in your project like so:

npm i react react-dom --save-dev

With this in place, your Vite server can find any necessary React dependencies.

Using the react shortcode, you can insert components into any static template that 11ty supports. You'll just need to pass the path to your component like so:

<!--for nunjucks and liquid templates -->
{% react 'components/path/to/Component' %}

<!--for handlebars templates --> 
{{{ react 'components/path/to/Component' }}}

Let's say we're using _includes as our includes folder (yes, you can override this here). Using this path, Slinkity will go fetch the React component found at:

_includes/components/path/to/Component.jsx

Note that _includes and .jsx are optional in our shortcode. Passing {% react '_includes/components/path/to/Component.jsx' %} works just as well!

Where your components should live

⚠️ You may have noticed we're using a components directory inside our "includes." This is where all your imported components should live. Slinkity will always copy the contents of _includes/components/ to the build for Vite to pick up. If you place your components anywhere outside of here, Vite won't be able to find them!

You can also pass data to your components as key / value pairs. Shortcode syntax doesn't accept objects, so we've dreamed up a slightly different syntax.

Let's say you have a date component that wants to use 11ty's supplied date object. You can pass this "date" prop like so:

<!--for liquid templates -->
{% react 'components/Date' 'date' page.date %}

<!--for nunjucks templates (use commas!) -->
{% react 'components/Date', 'date', page.date %}

<!--for handlebars templates --> 
{{{ react 'components/Date', 'date', page.date }}}

...Where "date" is the key, and page.date is the value passed by 11ty. We can access our prop inside components/Date.jsx like so:

import React from 'react'

function ViewDate({ date }) {
  return (
    <span>{date}</span>
  )
}

export default ViewDate

Passing multiple props

You're free to pass as many key / value pairs as you want! The names and ordering of your keys shouldn't matter.

<!--liquid template example-->
{% react 'components/DisplayAllTheThings' 'date' page.date
'url' page.url 'fileSlug' page.fileSlug %}

Learn about page-level components →