Skip to main content

Getting Started

Way Provider in less than 5 minutes.

Getting Started​

Get started by installing the way-provider.

npm install way-provider

What you'll need​

  • Node.js version 14 or above:
    • When installing Node.js, you are recommended to check all checkboxes related to dependencies.

Wrap your webcomponents into the provider​

  //in script
  import 'way-provider'

  //in html
  <way-provider>
    <my-webcompoent1/>
    <my-webcompoent2/>
  </way-provider>

Provide a context​

Using provider in Vanilla JS​

  <way-provider context='{"name":"consumer"}'>
    <my-webcompoent1/>
    <my-webcompoent2/>
  </way-provider>

Using it in a framework​

Tested on Lit and Svelte so far

  const context = {
    name: "consumer"
  }

  <way-provider context={context}>
    <my-webcompoent1/>
    <my-webcompoent2/>
  </way-provider>

Consume the provider​

Inside the webcomponents you need to declare the props you want to consumer that match consumer keys

Usage in Vanilla JS​

  import { attachWayContext } from 'way-context';

  connectedCallback(){
    attachWayContext(this)
  }

  let name = this.getAttribute('name')

Usage in Lit​

  import { attachWayContext } from 'way-context';

  connectedCallback(){
    attachWayContext(this)
  }

  @property()
  name

Usage in Svelte​

  import { attachWayContext } from 'way-context';
  import { get_current_component } from 'svelte/internal';

  const thisCmp = get_current_component()

  onMount(() => attachWayContext(thisCmp))

useWayProvider​

This function returns current context

part: string (optional), used to get one property from context 

  //returns whole context
  const context = useWayContext();

  //returns just name from context
  const name = useWayContext('name');