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.