Extending Lookbook / Other

Global Data Store

Lookbook provides a global Lookbook.data object that can be used for storing arbitrary custom data that can then be used in preview layout templates and custom inspector panels.

Setting data

Data can be set pretty much anywhere in your application, although usually this will be when configuring your Lookbook installation.

# Set individual property:
Lookbook.data.company_name = "My Company"

# Override entire data store:
Lookbook.data = {
  company_name: "My Company",
  project_github: "https://github.com/my-company/this-project"

Both dot-notation and regular hash getter/setter syntax are supported for getting and setting properties on the data object. Hash keys can either be strings or symbols.

# All the following statements are equivalent:
Lookbook.data.company_name = "My Company"
Lookbook.data[:company_name] = "My Company"
Lookbook.data["company_name"] = "My Company"

Hook callbacks

The data object can be accessed in lifecycle hooks in order to capture information about the current Lookbook state, or the results of some custom processing.

All hook callback blocks are yielded the main Lookbook application object as their first argument, so data can be set on it as follows:

Lookbook.after_change do |app, changes|
  app.data.last_changed_files = changes[:modified].presence || [] 

Using in preview layouts

Custom data can be accessed in preview layout templates via the params object:

<!-- app/views/layouts/preview.html.erb -->
<div><%= yield %></div>
<p>Built by <%= params.dig(:lookbook, :data, :company_name) %></p>

Note that accessing data using dot-notation syntax is not supported in preview templates However the Lookbook preview helper can be used to make things less verbose if desired.

Using in custom Panels

Custom panel templates have access to the Lookbook.data object via the local data variable:

<!-- app/views/panels/modified.html.erb -->
<h1>Last modified files:</h1>
  <% data.last_changed_files.each do |path| %>
    <li><%= path %></li>
  <% end %>

User Guide

Extending Lookbook