This is an example of using C-Hear's file technology called CHIF (.chif) in a React App.
CHIF stands for C-Hear Intelligent File. It was created by the company C-Hear to help make websites and apps more digitally accessible for people with disabilities and visual impairments.
-
A .chif is made up of audio, text and metadata inside an image.
-
The small file size takes away the need to host videos on a video hosting site and allows the file to live right on your site/app.
-
There's no need to worry about slow loading due to the amount of images you may have on your site. An eCommerce site can use this easily and without loading issues.
Go to C-Hear's CHIF Builder, create it, download and save it in a directory on your computer.
Follow the link below:
https://chearprod.appspot.com/builder
In the index.html file in the following section:
<head></head>- Add the following:
<link
rel="stylesheet"
href="https://chifplayercdn.blob.core.windows.net/player2/chearPlayer_1.0.0.css"
/><script src="https://chifplayercdn.blob.core.windows.net/player2/chearPlayer_1.0.0.js"></script>- Make sure to add the .chif you created to the desired directory.
- To use a .chif in a Class Component, first import it as you would an image and to get it to run, add the following function inside componentDidMount():
window.chifPlayer.streamFiles();Example of using a .chif in a Class Component:
import React from 'react';
import chif from '../chifs/blackpug.chif';
export default class ClassEx extends React.Component {
componentDidMount() {
window.chifPlayer.streamFiles();
}
render() {
return (
<div class='page'>
<h3>Class Example</h3>
<chear src={chif}></chear>
</div>
);
}
}- To use a .chif in Functional Components, first import it as you would an image and to get it to run, add the following function inside the useEffect hook:
window.chifPlayer.streamFiles();Example of using a .chif in a Functional Component:
import React, { useEffect } from 'react';
import chif from '../chifs/blackpug.chif';
const FuncEx = props => {
useEffect(() => {
window.chifPlayer.streamFiles();
}, []);
return (
<div class='page'>
<h3>Functional Example</h3>
<chear src={chif}></chear>
</div>
);
};
export default FuncEx;