wrapper

By default, when Joystick renders a component, it takes the contents of its render() function and renders them into a <div></div> tag with a js-c and js-i attribute (where js-c is the component ID and js-i is the component's instance ID). This is done to give Joystick a target for scoping things like CSS and events as well as handling DOM selection for mapping relationships between child components and their parents.

Example Usage

If you'd like to change the wrapper element or apply classes to a wrapper, you can do so via the wrapper option passed to your component's options object:

import joystick from '@joystick.js/ui';

const books = [
  { id: 1, title: 'Awareness', author: 'Anthony DeMello' },
  { id: 2, title: 'Seeking Wisdom', author: 'Peter Bevelin' },
  { id: 3, title: 'The Courage to Be Disliked', author: 'Ichiro Kishimi' }
];

const BooksList = joystick.component({
  wrapper: {
    tag_name: 'ul',
    class_list: ['books-list'],
  },
  render: ({ each }) => {
    return `
      ${each(books, (book = {}) => {
        return `<li><a href="${book?.id}">${book.title}</a> by ${book.author}</li>`;
      })}
    `;
  },
});

export default BooksList;

This allows us to create simple, specific components without littering our DOM with unnecessary <div></div> tags while retaining Joystick's core behavior. Above, we've swapped the default div tag with a ul and added an additional CSS class books-list. When this renders in the browser, we can expect some HTML like this:

<ul class="books-list" js-c="abcdefg1234567" js-i="a1b2c3d4">
  <li><a href="1">Awareness</a> by Anthony DeMello</li>
  <li><a href="2">Seeking Wisdom</a> by Peter Bevelin</li>
  <li><a href="3">The Courage to Be Disliked</a> by Ichiro Kishimi</li>
</ul>

API

Definition

wrapper: {
  tag_name: string;
  id: string;
  class_list: [string];
};

Parameters

wrapper object

Customize the outer HTML wrapper element and classes used when rendering a component.

tag_name string

The HTML tag name to use as the wrapper element (e.g., 'div', 'ul'). Defaults to 'div'.

id string

An optional ID to assign to the wrapper element.

class_list array

An array of CSS class names to apply to the wrapper element.