Understanding how to pass and use state is fundamental to building a dynamic application.

State object

Every Enhance element pure function is passed a state object comprising of attrs; an object containing the attributes and their values from your custom element, and a store; an object containing your application state. You can use them independently or use attributes as keys for looking up nested application data from your store.

export default function MyElement({ html, state }) {
  const { attrs, store } = state
  const { message = '', bookId = '' } = attrs
  const { books = {} } = store
  const book = books.bookId
  const bookTitle = book.title || ''

  return html`
🗝 💾

Community Resources

Visit Enhance on GitHub.
Join our Discord server to chat about development and get help from the community.
Follow Enhance in the Fediverse. We're huge fans of the IndieWeb!