Extension APIs

Inspector Panels

See the inspector panels section in the guide for more information.

.define_panel

Add a custom inspector panel to the Lookbook instance.

Lookbook.define_panel(<name>, <partial_path>, <opts?>)

<name>	A unique, ‘slug-friendly’ name for the panel Type: Symbol \| String
<partial_path>	Path to the partial template used to render the panel Type: String
<opts?>	Hash of panel options Type: Hash

Lookbook.define_panel(:info, "panels/info", {
  label: "Extra Info"
})

.remove_panel

Remove an inspector panel from the UI

Lookbook.remove_panel(<name>)

<name>

The name of the panel to remove

Type: Symbol | String

Lookbook.remove_panel(:info)

.amend_panel

Edit the properties of an existing (custom or system) panel.

Lookbook.amend_panel(<name>, <opts?>)

<name>	The name of the panel to remove Type: Symbol \| String
<opts?>	Hash of panel options to override the default options with Type: Hash

Lookbook.amend_panel(:params, {
  label: "Knobs", # change the tab text
  hotkey: "ctrl.k", # override hotkey
  position: 1 # move to first position in the tab list
})

Panel Options

label	The text to be displayed in the tab for the panel
hotkey	keyboard shortcut to make panel become the active tab Type: String
disabled	Disabled tabs are still accessible but are greyed out in the UI Type: Boolean
show	Whether or not to display the tab/panel Type: Boolean,Default: true
copy	If present, the panel will display a copy button that copies the value of this property to the clipboard when clicked Type: String
position	Position of the tab in the tab list Type: Integer
locals	A `Hash` of local variables that will be passed to the panel when it is rendered Type: Hash

Param inputs

See the param inputs section in the guide for more information.

.define_param_input

Add a custom param input for use with @param tags

Lookbook.define_param_input(<name>, <partial_path>, <opts?>)

<name>	A unique, ‘slug-friendly’ name for the input Type: Symbol
<partial_path>	Path to the partial template used to render the input Type: String
<opts?>	Hash of input options Type: Hash

Lookbook.define_param_input(:url, "inputs/url")

Custom Tags

See the custom tags section in the guide for more information.

.define_tag

Add a custom tag for use when annotating component previews

Lookbook.define_tag(<name>, <arg_names?>)

<name>	A unique, ‘slug-friendly’ name for the tag Type: Symbol
<arg_names?>	Array of positional argument names to match to values when parsing the tag body contents Type: Array

Lookbook.define_tag(:status, [:current_status])

Lifecycle Hooks

See the hooks section in the guide for more information.

.after_initialize

Run once Lookbook has been set up and the initial parsing of files has been completed.

Lookbook.after_initialize do |app|
  puts "Lookbook version #{app.version} has started"
  puts "There are #{app.previews.size} previews and #{app.pages.size} pages"
  # other code here...
end

.after_change

Run each time a change is detected to a file that Lookbook is watching, unless listening for changes has been disabled in the config.

Receives a hash as the second argument with :modified, :added, and :removed properties, each of which is an array of affected file paths.

Lookbook.after_change do |app, changes|
  puts "Modified files: #{changes.modified.join("\n")}"
  puts "Added files: #{changes.added.join("\n")}"
  puts "Removed files: #{changes.removed.join("\n")}"
end

.before_exit

Run when the current process exits, after Lookbook has stopped any listeners.

Lookbook.after_initialize do |app|
  puts "Shutting down..."
end