dha-assets
Advanced tools
This module is used for image and audio assets.
Install from npm:
Background Props:
Image Props:
Disclaimer: For this demo code to work with imported images in JS and from the public folder options, add and/or replace dha-logo.png and dha-splash.png with your own image files.
Add and/or Replace Image Files in Application:
This package provides built-in images so this step is optional and isn't necessary for the package to work. If you want to use your own local asset files with this package there are a couple of ways to do this in create-react-app, see Option 1 and Option 2.
Option 1: Import Assets in JS Using Relative Path.
Relative folder (./src/assets) - Add audio and/or image files to a relative folder from source. Change the path and folder name to your application structure and adjust the import path when importing the asset.
react-app-env.d.ts (Audio Only) - Append the following line to the end of file and duplicate for all audio file extensions that are being used. Prepending this line to the start of file will throw an error.
/// <reference types="react-scripts" />
// Append the following line and any additional audio extensions
declare module '*.mp3';
Importing Assets in JS Example:
Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.
// Audio
import audioMp3 from '../assets/audio/audio.mp3';
createAudio('audioMp3', audioMp3);
// Image
import imagePng from '../assets/images/image.png';
<Background alt="Image alt" image={imagePng} scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src={imagePng} styles={styles.image} />;
Option 2: CRA Public Folder Assets - NOT Recommended
Public folder (./public) - Add audio and/or image files to CRA public folder. Create your own folder structure and adjust the path when using the asset.
Using CRA Public Folder Example:
Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.
// Audio
createAudio('audioMp3', 'assets/audio/audio.mp3');
// Image
<Background alt="Image alt" image="assets/images/image.png" scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src="assets/images/image.png" styles={styles.image} />;
Home.tsx - Functional component - Image Demo
import { Grid, Typography } from '@material-ui/core';
import { Background, Image } from 'dha-assets';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
import dHASplashRelAssets from '../../assets/images/dha-splash.png';
const styles: { image: object } = {
image: {
borderStyle: 'solid',
},
};
const Home: React.FC = () => {
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 1: Built-In Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" name="dha-logo" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" name="dha-splash" styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 2: Import Image in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src={dHALogoRelAssets} scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src={dHASplashRelAssets} styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 3: Hosted Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background
alt="Placeholder Background Component"
src="https://via.placeholder.com/250"
scale={1}
styles={styles.image}
>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image
alt="Placeholder Image Component"
maxWidth="250px"
src="https://via.placeholder.com/250"
styles={styles.image}
/>
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 4: CRA Public Folder Image - NOT Recommended</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src="dha-logo.png" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src="dha-splash.png" styles={styles.image} />
</Grid>
</Grid>
);
};
export default Home;
Home.tsx - Class component - Image Demo
import { Grid, Typography } from '@material-ui/core';
import { Background, Image } from 'dha-assets';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
import dHASplashRelAssets from '../../assets/images/dha-splash.png';
const styles: { image: object } = {
image: {
borderStyle: 'solid',
},
};
class Home extends React.Component {
render() {
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 1: Built-In Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" name="dha-logo" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" name="dha-splash" styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 2: Import Image in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src={dHALogoRelAssets} scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src={dHASplashRelAssets} styles={styles.image} />
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 3: Hosted Image</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background
alt="Placeholder Background Component"
src="https://via.placeholder.com/250"
scale={1}
styles={styles.image}
>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image
alt="Placeholder Image Component"
maxWidth="250px"
src="https://via.placeholder.com/250"
styles={styles.image}
/>
</Grid>
<Grid item={true} xs={12}>
<Typography variant="h5">Option 4: CRA Public Folder Image - NOT Recommended</Typography>
<Typography>Add images to public folder and add file path/name to src prop.</Typography>
</Grid>
<Grid item={true} xs={6}>
<Background alt="DHA logo" src="dha-logo.png" scale={1} styles={styles.image}>
<Typography>Add nested div or React component (optional)</Typography>
</Background>
</Grid>
<Grid item={true} xs={6}>
<Image alt="DHA splash" maxWidth="250px" src="dha-splash.png" styles={styles.image} />
</Grid>
</Grid>
);
}
}
export default Home;
Disclaimer: For this demo code to work with imported audio in JS and from the public folder options, add and/or replace exhale.mp3 and inhale.mp3 with your own audio files.
Add and/or Replace Audio Files in Application:
react-app-env.d.ts (Audio Only) - Append the following line to the end of file and duplicate for all audio file extensions that are being used. Prepending this line to the start of file will throw an error.
/// <reference types="react-scripts" />
// Append the following line and any additional audio extensions
declare module '*.mp3';
Home.tsx - Functional component - Audio Demo
import { Grid, Typography } from '@material-ui/core';
import { audioFiles, createAudio, pauseAudio, playAudio, stopAudio } from 'dha-assets';
import React from 'react';
import exhaleRelAssets from '../../assets/audio/exhale.mp3';
import inhaleRelAssets from '../../assets/audio/inhale.mp3';
const Home: React.FC = () => {
createAudio('exhaleRelAssets', exhaleRelAssets);
createAudio('inhaleRelAssets', inhaleRelAssets);
createAudio('pianoURL', 'http://www.kozco.com/tech/piano2.wav');
createAudio('inhalePublic', 'exhale.mp3');
createAudio('exhalePublic', 'inhale.mp3');
const pauseRelAssets = () => {
pauseAudio('exhaleRelAssets');
pauseAudio('inhaleRelAssets');
};
const playRelAssets = () => {
playAudio('exhaleRelAssets');
playAudio('inhaleRelAssets');
};
const stopRelAssets = () => {
stopAudio('exhaleRelAssets');
stopAudio('inhaleRelAssets');
};
const pauseURL = () => {
pauseAudio('pianoURL');
};
const playURL = () => {
playAudio('pianoURL');
};
const stopURL = () => {
stopAudio('pianoURL');
};
const pausePublic = () => {
pauseAudio('exhalePublic');
pauseAudio('inhalePublic');
};
const playPublic = () => {
playAudio('exhalePublic');
playAudio('inhalePublic');
};
const stopPublic = () => {
stopAudio('exhalePublic');
stopAudio('inhalePublic');
};
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography>audioFiles: {JSON.stringify(audioFiles)}</Typography>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 1: Import Audio in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={playRelAssets}>Play</button>
<button onClick={pauseRelAssets}>Pause</button>
<button onClick={stopRelAssets}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 2: Hosted Audio</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={playURL}>Play</button>
<button onClick={pauseURL}>Pause</button>
<button onClick={stopURL}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 3: CRA Public Folder Image - NOT Recommended</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={playPublic}>Play</button>
<button onClick={pausePublic}>Pause</button>
<button onClick={stopPublic}>Stop</button>
</Grid>
</Grid>
);
};
export default Home;
Home.tsx - Class component - Audio Demo
import { Grid, Typography } from '@material-ui/core';
import { audioFiles, createAudio, pauseAudio, playAudio, stopAudio } from 'dha-assets';
import React from 'react';
import exhaleRelAssets from '../../assets/audio/exhale.mp3';
import inhaleRelAssets from '../../assets/audio/inhale.mp3';
class Home extends React.Component {
constructor(props: any) {
super(props);
createAudio('exhaleRelAssets', exhaleRelAssets);
createAudio('inhaleRelAssets', inhaleRelAssets);
createAudio('pianoURL', 'http://www.kozco.com/tech/piano2.wav');
createAudio('inhalePublic', 'exhale.mp3');
createAudio('exhalePublic', 'inhale.mp3');
}
pauseRelAssets = () => {
pauseAudio('exhaleRelAssets');
pauseAudio('inhaleRelAssets');
};
playRelAssets = () => {
playAudio('exhaleRelAssets');
playAudio('inhaleRelAssets');
};
stopRelAssets = () => {
stopAudio('exhaleRelAssets');
stopAudio('inhaleRelAssets');
};
pauseURL = () => {
pauseAudio('pianoURL');
};
playURL = () => {
playAudio('pianoURL');
};
stopURL = () => {
stopAudio('pianoURL');
};
pausePublic = () => {
pauseAudio('exhalePublic');
pauseAudio('inhalePublic');
};
playPublic = () => {
playAudio('exhalePublic');
playAudio('inhalePublic');
};
stopPublic = () => {
stopAudio('exhalePublic');
stopAudio('inhalePublic');
};
render() {
return (
<Grid container={true} spacing={2}>
<Grid item={true} xs={12}>
<Typography>audioFiles: {JSON.stringify(audioFiles)}</Typography>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 1: Import Audio in JS Using Relative Path</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={this.playRelAssets}>Play</button>
<button onClick={this.pauseRelAssets}>Pause</button>
<button onClick={this.stopRelAssets}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 2: Hosted Audio</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={this.playURL}>Play</button>
<button onClick={this.pauseURL}>Pause</button>
<button onClick={this.stopURL}>Stop</button>
</Grid>
<Grid item={true} xs={12}>
<Typography>Option 3: CRA Public Folder Audio - NOT Recommended</Typography>
</Grid>
<Grid item={true} xs={12}>
<button onClick={this.playPublic}>Play</button>
<button onClick={this.pausePublic}>Pause</button>
<button onClick={this.stopPublic}>Stop</button>
</Grid>
</Grid>
);
}
}
export default Home;
see Github wiki
https://www.npmjs.com/package/dha-assets
pending
FAQs
DHA SDK assets
The npm package dha-assets receives a total of 8 weekly downloads. As such, dha-assets popularity was classified as not popular.
We found that dha-assets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.