Commit 95a7cc84 authored by Hauk Olaussen's avatar Hauk Olaussen
Browse files

Added an example of usage of the context api

Closes issue #16
parent 5d051d97
import React, { Component } from "react";
// Displays usage of the context api
const AudioPlayerContext: React.Context<AudioPlayerState> = React.createContext<
AudioPlayerState
>({ muted: false });
/**
* Handles the audio for each of the exhibitions
* Handles the audio for each of the exhibitions using the context api
*/
class AudioPlayer extends Component<AudioPlayerProps, { muted: boolean }> {
class AudioPlayer extends Component<AudioPlayerProps, AudioPlayerState> {
audio: HTMLAudioElement;
state: AudioPlayerState = {
muted: false,
};
constructor(props: AudioPlayerProps) {
super(props);
this.audio = props.source;
this.state = {
muted: false,
};
this.play();
}
......@@ -57,9 +62,11 @@ class AudioPlayer extends Component<AudioPlayerProps, { muted: boolean }> {
render() {
return (
<AudioPlayerContext.Provider value={{ ...this.state }}>
<button onClick={this.mute}>
{this.state.muted ? "Unmute" : "Mute"}
</button>
</AudioPlayerContext.Provider>
);
}
}
......
......@@ -47,3 +47,7 @@ type Circle = {
color: string;
xPos: number;
};
type AudioPlayerState = {
muted: boolean;
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment