open-index/open-npm huggingface dataset:
npm package: @lamphq-org/web-sdk
Description: Lamp Web SDK
Author: Lamp Engineering
Latest version: 0.9.6

# Lamp Web SDK

This is the SDK for integrating Lamp into your platform.
Lamp provides the capability to add interactions to the content on your plaform.

## Get Started

### Prepare
At the root of your package, create or edit a file `.npmrc` and add the 
following line

```
  @lamphq-org:registry=https://npm.pkg.github.com
```
### Install
  Now you can add the SDK to your project
  using `npm` or `yarn` as
```
  npm install @lamphq-org/web-sdk
  // or
  yarn add @lamphq-org/web-sdk
```

### Initialize 
  When you initialize the Lamp client, your app gets ready to use all the cool functionalities
  that Lamp provides.


Initialize the app
```
  import { initializeClient } from '@lamphq-org/web-sdk'
  initializeClient({
    platformId: 'your_platform_id',
    signature: 'signed token',
    refId: 'user_id_reference',
    role: 'instructor' // can be 'instructor' or 'learner' 
  })
```

### Consuming Lamps
  To consume a Lamp's functionalities within your app, just call the
  `consumeLamp` function that comes as part of the SDK. Lamps come in different flavors (called types) and it is upto you to decide where in your UI you want to mount the Lamp.

  Vanilla
  ```
    import { consumeLamp } from '@lamphq-org/web-sdk'

    consumeLamp({
      type: 'donut',  // 'donut', 'classroom', etc.
      target: document.getElementById('mount-elem'), // The lamp app will render inside this element
      metaData: { // contextual meta data for the Lamp
        recorded: true,
      }
    })

  ```

  React
  ```
    import { useRef, useState } from 'react'
    import { consumeLamp } from '@lamphq/web-sdk'

    export const DonutContainer = () => {
      const containerRef = useRef()
      const [donutOpen, setDonutOpen] = useState()
      const closeLamp = useRef()
      useEffect(() => {
        // returns a unmount function used to close the Lamp app
        closeLamp.current = consumeLamp({
          type: 'donut',  // 'donut', 'classroom', etc.
          target: containerRef,
          metaData: { } // optional contextual data
        })
        setDonutOpen(true)
      }, [])

      const handleLampClosed = () => {
        if (closeLamp.current) {
          closeLamp.current()
          setDonutOpen(false)
        }
      }

      return (
        <div class="header">
          {donutOpen && <div class="btn" onClick={handleLampClosed}>
            End Session
          </div>
          }
        </div>
        <div ref={containerRef} style={{ height: '100vh', width: '100vw' }} />
      )
    }

  ```