# Glisser Elements - React Component Library

> The award-winning tech platform powering unique company event experiences, anywhere. [Learn more about us](https://www.glisser.com/)

*Note:* you need a Glisser account to use the Elements. [Sign up for free here](https://present.glisser.com/join).

## Components

- `SlideFeed` - main content feed where presentation will be displayed
- `SlideTab` - slide content tab
- `CommentFeed` - Q&A content feed where attendees interact with presenter
- `NoteFeed` - used for attendees to take notes about presentation
- `Download` - enable download of notes after presentation

## Installation

Add to your React project 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 process<sup>[1](#boarding-process)</sup>. 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:

```js
// 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:

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

## Support

Get in touch with us at [support@glisser.com](mailto:support@glisser.com)

### Footnote

<a name="boarding-process">1</a> The boarding process is the UI for the audience to join the event using event code and optional id based on event/session settings.
