joystick.component()

In Joystick, the component() method is used to define components for your UI. A component is created by calling the component() method (passing an options object which defines the HTML it renders and its behavior) and exporting it as the default from the file it's defined within.

When defining a component, it should be placed in one of the following paths: ui/components, ui/layouts, or ui/pages. Inside of those folders, each component should be defined following this structure:

ui/<components|layouts|pages>/<component_name>/index.js

Example Usage

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

const Index = joystick.component({
  render: () => {
    return `
      <div class="index">
        <p>This is the index page. You can render any HTML you wish here.</p>
      </div>
    `;
  },
});

export default Index;

API

css string|object|function

A string containing the CSS for the component. If defined as an object, can specify breakpoints at min/max width and height. If defined as a function, receives the component instance as an argument.

data function

A function that's called on the server during server-side rendering (SSR) that fetches data from your API or another location (e.g., a third-party API).

default_props object|function

An object defining the default props for the component. If defined as a function, must return an object representing the default props. When using a function, the full component instance is passed to the function.

events object

An object defining the event listeners for the component. The key follows a pattern of <event> <selector> and the value is the function to call when the event fires.

lifecycle object

An object defining different lifeycle methods for the component.

on_before_mount function

A function called before a component is mounted to the screen.

on_before_render function

A function called before a component is rendered to the screen (both at mount time and re-render time).

on_before_unmount function

A function called right before the browser rendering the component is closed.

on_mount function

A function called immediately after the component is mounted to the screen.

on_refetch_data function

A function called immediately after the data.refetch() method is called on the component.

on_render function

A function called immediately after a component renders (both at mount time and re-render time).

on_update_props function

A function called immediately after a component renders with new props.

methods object

An object containing miscellaneous functions defined as methods.

render function required

A function that returns the HTML defining your component. Receives a single argument (the component instance) as an object.

state object|function

An object defining the default state for the component. If defined as a function, must return an object representing the default state. When using a function, the full component instance is passed to the function.

test object

An object defining test-related options for the component.

name string

A name identifier to use when tracking function calls to the component instance in tests.

websockets function

A function returning an object defining the websocket server endpoints to establish a client connection to and event handlers for inbound messages.

wrapper object

Configuration for the wrapper div that Joystick automatically wraps around your component at render time.

attributes array<object>

An array of objects with a key property and value property representing HTML attributes to assign to the wrapper.

class_list array<string>

An array of strings representing classes to set as the class attribute on the wrapper div.

id string

A custom id attribute to set on the wrapper div.

tag_name string

The HTML tag you'd like to use for the wrapper (defaults to <div>).