Kodemo Player#
The Kodemo Player is the component we use to view and play back Kodemo documents. It handles all of the client side interactivity such as code transitions, image highlights and navigation.
The player comes in two forms; a React component and a standalone player with all dependencies baked in.
React Component#
To use Kodemo within a React project start by installing the @kodemo/player
package.
Now you're ready to import the KodemoPlayer
component and render it in your app.
So far we're only rendering a blank document so there won't be anything visible on screen. Next, we'll use the json
property to tell the player what document to render.
This code is now a fully functional example of how to run Kodemo! There are other properties besides json
available for customizing the player size and theme. Read more in Config Options.
Composition#
The Kodemo player supports composition, allowing you to extend, customize or remove individual parts of the interface. You can provide a custom player composition as a child of the KodemoPlayer component.
Take a look at a simple example where we use composition to add a custom header to the top of the story. We're also wrapping the story with an additional div for layout purposes.
Besides our custom header we are also providing a render tree for the Story, Subjects and Timeline. In our example we're not making any changes to those components but it is possible to modify them in any way you see fit. For example, you could remove the header tabs, flip the placement of the story and subjects or add custom styles.
Standalone Player#
The standalone player is intended to make it easy to use Kodemo without being familiar with or having to install React. For this example, let's keep things simple and include the player JavaScript from a CDN.
Once the player script has loaded, the KodemoPlayer
class will be available in the window
and we can create a new instance of the player.
The final ingredient will be to feed our new player instance with a document to render. This is done by calling the load
method which accepts a single parameter; the JSON document we want to render.
And that's it! If you copy-paste this HTML and run it, it will produce a working version of the Kodemo player on your page.
You can pass a container element to the KodemoPlayer
constructor to tell it where to render. If you don't provide a container, the player will automatically add itself to the document body.
ESM Standalone Player#
If you want to install the standalone player from npm it's available as @kodemo/player-standalone
. Once installed the API for initializing and loading documents remains the same.
Player Options#
Both the React component and standalone player can be customized and themed using Config Options.