Glisser Elements integration with React App
The Glisser Elements is, in technical terms, a React library that can be used in a React project. Therefore it requires an application running React. The information found here will guide you to create a basic React application using Create React App (CRA) where you can load any of the available Glisser Elements.
Creating the React App
The steps below are also available in the official CRA documentation.
Remember to pick a name for your React app. We will be using the name sample-glisser-app in this document.
Using the command line in your Terminal, run the following npm script:
npm init react-app sample-glisser-app
You can also use yarn:
yarn create react-app sample-glisser-app
Adding the Glisser Elements to the React App
Once the script to create the React app is finished, following the steps provided, go into the newly created folder which bares the same name as your project (in the case above sample-glisser-app). Inside the folder (usually cd sample-glisser-app), before anything else, run the following command to add the Glisser Elements package to your project:
npm install @glisser/react
This will install the Elements to your project and will make it available to be used in your app. Now it’s time to open the project in your code editor. Inside the src folder there should be a file called App.js. Let’s edit the file by adding the <CommentFeed> Element to your app by replacing all the contents of the file with the following:
import React from 'react'
import { CommentFeed, useSession } from '@glisser/react'
function App() {
const [session, setSession] = useSession()
return (
<CommentFeed
session={session}
setSession={setSession}
boarding={true}
/>
);
}
export default App;
The code sample above is the bare minimum required to run a Glisser Element. This particular example uses the <CommentFeed> Element component however any other component could be used. Here’s a list of the elements currently available.
Running the React application
Once the code is replaced, it’s time to run the React application. So go back to the Terminal and run:
npm start
This should open a new tab in your browser with the Glisser Element requesting the event code to onboard an event. Once the code and the email address (if applicable to the event) are added, you should be able to see the Q&A component working.
Build the React application for deployment
After checking and testing the application running on the browser, it should be ready for its final build by running the command:
npm run build
This usually takes a few seconds and will provide a success message when it’s finished.
Support
If you have any technical questions, please post it here in this forum and we will be happy to answer your questions as soon as possible.