Nutty Peanut Marshmallow

    @glisser/react

    0.0.41 • Public • Published

    Glisser Elements - React Component Library

    Glisser Elements is a virtual events SDK, based on Glisser's award-winning tech platform, that allows enterprises and their agencies to create bespoke virtual and hybrid events experiences using Glisser's highly-developed components, inside their own websites. Learn more about Glisser here and about Glisser Elements here.

    Note: you need a Glisser account to use the Elements. Sign up for free here.

    Components

    • Slide main content feed where presentation will be displayed. Component name: SlideFeed
    • Slide Tab slide content tab. Component name: SlideTab
    • Comment comment feed where attendees interact with presenter, eg. via Q&A. Component name: CommentFeed
    • Stream display live broadcast, video conference, or pre-recorded video. Component name: Stream
    • Note used for attendees to take notes about presentation. Component name: NoteFeed
    • Download enable download of notes after presentation. Component name: Download

    Installation

    Add to your React project either using npm install @glisser/react or yarn add @glisser/react

    Usage

    SlideTab, NoteFeed and Download cannot be used on their own as they requires either SlideFeed and/or CommentFeed for the boarding process1. However, both SlideFeed and CommentFeed can be used on their own, together and combined with SlideTab. In all cases, the parent application requires the following to sync the state: const [session, setSession] = useSession()

    Here's a sample of an application with multiple components:

    // App.js
    import React from 'react'
    import { useSession, CommentFeed, SlideFeed, SlideTab } from '@glisser/react'
    
    const App = () => {
      const [session, setSession] = useSession()
    
      return (
        <div>
          <div style={{ display: 'flex' }}>
            <div style={{ width: '50vw' }}>
              <SlideFeed
                session={session}
                setSession={setSession}
                boarding={true}
              />
            </div>
            <div style={{ width: '20vw' }}>
              <SlideTab session={session} setSession={setSession} />
            </div>
          </div>
          <div style={{ width: '30vw' }}>
            <CommentFeed session={session} setSession={setSession} />
          </div>
        </div>
      )
    }
    
    export default App

    Boarding property

    Note that <SlideFeed /> has a boarding prop set to true which will load the event boarding process in it. This prop can be alternatively used with <CommentFeed />. So in a React application, it can only be used either with <SlideFeed /> or <CommentFeed />.

    Silent login

    The optional arguments accepted for useSession() are code and identifier which should be passed as an object. Here's an example:

    const [session, setSession] = useSession({
      code: 'event-code',
      identifier: 'email@email.com',
    })

    Support

    If you have any technical questions, please go to our forum.

    Footnote

    1 The boarding process is the UI for the audience to join the event using event code and optional id based on event/session settings.

    Keywords

    none

    Install

    npm i @glisser/react

    DownloadsWeekly Downloads

    6

    Version

    0.0.41

    License

    MIT

    Unpacked Size

    2.03 MB

    Total Files

    6

    Last publish

    Collaborators

    • glisser_itops