Using Rivet JavaScript

Auto #

Rivet components can be auto-initialized using the Rivet.init() method.

<script src="https://unpkg.com/rivet-core@2.8.1/js/rivet.min.js"></script>
<script>Rivet.init()</script>

New component instances are initialized automatically when added to the DOM and cleaned up when removed.

Manual #

If manual initialization of Rivet components is preferred, omit the call to Rivet.init().

Instead, you must call component creation methods on DOM elements to initialize them as Rivet components. Rivet provides the following component creation methods:

• Rivet.Accordion.init(selector)
• Rivet.Alert.init(selector)
• Rivet.Dialog.init(selector)
• Rivet.Disclosure.init(selector)
• Rivet.Dropdown.init(selector)
• Rivet.FileInput.init(selector)
• Rivet.Switch.init(selector)
• Rivet.Tabs.init(selector)

const disclosure = Rivet.Disclosure.init('[data-rvt-disclosure="disclosure-1"]')

Component creation methods are not constructors—they are static methods. However, they return the component-ized DOM element as a convenience.

Module #

A module bundle is available if you want to import the component source files/creation methods a la carte:

https://unpkg.com/rivet-core@2.8.1/js/rivet-esm.js?module

You can call a specific component type’s initAll() method to initialize all instances of that component, including those not yet added to the DOM.

Alternatively, you can call a component creation method to initialize a specific DOM element as a Rivet component.

<script type="module">
  import { Disclosure } from 'https://unpkg.com/rivet-core@2.8.1/js/rivet-esm.js?module'

  // Initialize all disclosure components including future ones that might be
  // added to the DOM
  Disclosure.initAll()

  // Or, initialize specific component instances manually
  const disclosure = Disclosure.init('[data-rvt-disclosure="disclosure-1"]')
</script>

Getting component instances #

You can get a component instance by using querySelector() to retrieve its root DOM element.

<div data-rvt-disclosure="disclosure-1">
  <button data-rvt-disclosure-toggle>I'll disclose</button>
  <div data-rvt-disclosure-target>Some more details</div>
</div>

const disclosure = document.querySelector('[data-rvt-disclosure="disclosure-1"]')

Calling component methods #

Many components provide methods that can be used to interact with it programmatically in the same way a human user might. These methods are listed in each component’s documentation.

A component’s methods are attached to its root DOM element.

const disclosure = document.querySelector('[data-rvt-disclosure="disclosure-1"]')

disclosure.open()

Listening for component events #

Many components emit browser events when they are interacted with. These events are listed in each component’s documentation.

document.addEventListener('rvtAccordionOpened', function (event) {
  // The event.target property stores a reference to the root DOM element of the
  // component that emitted the event
  console.log(event.target)

  // The event.detail object contains additional context about the event
  console.log(event.detail)
})

Each component also emits a rvtComponentAdded and rvtComponentRemoved event when it is added to or removed from the DOM.

Canceling component events #

You can cancel a component event by calling event.preventDefault().

Doing so prevents that specific component behavior from happening, such as opening and closing.

In the example below, calling event.preventDefault() would stop all accordion panels on the page from opening.

document.addEventListener('rvtAccordionOpened', function (event) {
  event.preventDefault()
})

If you only need to cancel a component event in certain situations, you can wrap event.preventDefault() in a conditional statement or attach the event listener to specific elements.

someSpecificElement.addEventListener('rvtAccordionOpened', function (event) {
  if (someCondition) {
    event.preventDefault()
  }
})