Create a custom component

Create your own components using our PandaBridge libraries (Javascript & React) to send, upload information and interact with other components.

How components work

The component is the cornerstone of creation in PandaSuite Studio. There are more than 40 native components in the creation studio, but many other components have been developed by the community in hybrid format. These are custom components.

In fact, we provide you with Javascript & React (PandaBridge) libraries to create your own components and make them communicate with the rest of the content created in PandaSuite by receiving and sending information.

Just like a PandaSuite component, a custom component can:

• Have properties
• Define triggers
• Set up actions
• Create markers
• React according to languages
• Receive dynamic data (data provider)
• Synchronize with another PandaSuite component

Describe custom component

The pandasuite.json file allows you to describe how your custom component works and define its visual interface. It allows you to customize all the "classic" attributes of a component. They are arranged by category and can be easily reinterpreted in the studio.

To understand how to describe your component, let's look at the example of the react-media-player component (called URL Media Player in the studio). It allows you to insert audio or video content from an online platform (YouTube etc...) and interact with it.

This component is available on Github:
https://github.com/pandasuite/react-media-player-component/

Properties (properties)

Triggers ( events)

Actions (actions)

Synchronization ( synchronization)

There are plenty of other possibilities. Feel free to browse the other components available on Github: 
https://github.com/pandasuite?tab=repositories

Send and receive information with the PandaBridge library

PandaBridge makes it easy to communicate between your custom component and your application, both in terms of sending and receiving information. We have prepared boiler plate projects that use these Javascript & React libraries in order to show you how it works and to set up a ready-to-use functional base for integration into PandaSuite.

Javascript 

Here is the Javascript library enabling communication with PandaSuite:
https://github.com/pandasuite/pandasuite-bridge-js

And its example:
https://github.com/pandasuite/js-boilerplate-component

Here are the details of the methods of the PandaBridge class:

• PandaBridge.init: it allows the initialization of the component, it is the one that will allow you to execute the functionalities of PandaBridge.
• PandaBridge.onLoad: this method is called only once, when the component is visually loading. It allows to receive the object properties and the list of markers defined in the pandasuite.json.
• PandaBridge.send: it is the way to send, to communicate from the component to the application. It is used to push up events/triggers.
• PandaBridge.synchronize: this method relies on a specific function in which the arguments correspond to the percentage of synchronization.
• PandaBridge.listen: it allows to receive studio actions, it is used for component actions.
• PandaBridge.isStudio: it corresponds to the action of being in the studio, for example in the case of the camera. It is of boolean type, it responds to
• PandaBridge.getSnapshotData: this is how to trace markers. It is paired with the setSnapshotData method
• PandaBridge.setSnapshotData: this is how to edit markers. It is paired with the g etSnapshotData method

React  

Here is the React library enabling communication with PandaSuite:
https://github.com/pandasuite/pandasuite-bridge-react

And its example:
https://github.com/pandasuite/react-boilerplate-component

Test & publish custom component 

We recommend that you use these examples to create your component. You have several options to work on it: use the repository as a template via Github (you need a Github account) or download the Zip to work locally. 

Scripts are available to test your component simply in a local environment. 

Go to the root of the component. 

yarn install
	

This command installs all the dependencies of the project to start working on it.

yarn start
	

yarn build
	

To create the component zip ( pandasuite-component.zip) and put it in your PandaSuite project. 

yarn release<br>
	

Once your component is ready, this command publishes it on Github as a release.