Extending Lookbook / Param Inputs

Custom Input Types

Lookbook ships with a number of pre-defined param input types that are used when adding dynamic preview parameters to your previews.

However if you need a param type that isn’t provided by Lookbook (or want to override one of the existing ones) you can easily add your own and then reference them in your @param tags.

Adding a custom input

To define a custom input use the Lookbook.add_input_type method when when you configure your Lookbook installation:

Lookbook. add_input_type (name, partial_path, opts = {})


name Symbol

Unique input type name

partial_path String

Path to the partial template used to render the input

opts Hash

Set of default options to be passed to the input. Any supplied param options will override these values

For example, to create a customised url input with a https:// prefix in front of it you could do the following:

# config/application.rb
Lookbook.add_input_type(:prefixed_url, "inputs/prefixed_url")
<!-- app/views/inputs/_prefixed_url.html.erb -->
  <%= text_field_tag(name, value,
    type: "url",
    "x-model": "value"
  ) %>

This input field will then be rendered when using the prefixed_url input type in @param tags:

class IframeComponentPreview < ViewComponent::Preview
  # @param src prefixed_url
  def default(src: 'example.com')
    render IframeComponent.new(src: src)

See the input template docs for more details on available template variables and helpers.

User Guide

Extending Lookbook