A comprehensive React multimedia component for editing and playing TEXT, MARKDOWN, AUDIO, VIDEO, and file uploads
npm install react-multimedia-componentA comprehensive React multimedia component library for editing and playing various media types including TEXT, MARKDOWN, AUDIO, VIDEO, and file uploads.
- 📝 Text Editor - Simple text input field
- 📄 Markdown Editor - Full-featured markdown editor with live preview, math formulas (KaTeX), and interactive buttons
- 📁 File Upload - Easy file upload functionality
- 🎤 Audio Recorder - Record audio with pause/resume capabilities
- 🎥 Video Recorder - Record screen or camera with audio
- 🎵 Audio Player - Beautiful audio player with custom controls
- 📹 Video Player - Video player with fullscreen support
- 📖 Markdown Player - Render markdown with math formulas and interactive elements
``bash`
npm install react-multimedia-component lucide-react
Or with yarn:
`bash`
yarn add react-multimedia-component
The component requires the following peer dependencies:
`bash`
npm install react react-dom lucide-react
Import the CSS once in your app:
`javascript
// In your main index.js or App.js
import 'react-multimedia-component/dist/index.css';
import { MultimediaEditor } from 'react-multimedia-component';
function App() {
return ;
}
`
The MultimediaEditor component provides a unified interface for creating different types of media content.
`jsx
import { MultimediaEditor, MEDIA_TYPES } from 'react-multimedia-component';
function App() {
const handleSubmit = (result) => {
console.log('Media type:', result.type);
if (result.type === MEDIA_TYPES.TEXT || result.type === MEDIA_TYPES.MARKDOWN) {
console.log('Content:', result.content);
} else if (result.file) {
console.log('File:', result.file);
// Upload file to your server
}
};
return (
onCancel={() => console.log('Cancelled')}
initialType="TEXT"
/>
);
}
`
#### Props
- onSubmit (function): Callback when content is submitted. Receives an object with type, content (for TEXT/MARKDOWN), or file (for UPLOAD/AUDIO/VIDEO)onCancel
- (function, optional): Callback when user cancelsinitialType
- (string, optional): Initial media type ('TEXT', 'MARKDOWN', 'UPLOAD', 'AUDIO', 'VIDEO'). Default: 'TEXT'
The MultimediaPlayer component displays different types of media content.
`jsx
import { MultimediaPlayer, MEDIA_TYPES } from 'react-multimedia-component';
function App() {
return (
<>
{/ Text Player /}
content="Hello, this is text content!"
title="My Text"
/>
{/ Markdown Player /}
content="# Hello World\n\nThis is markdown!"
/>
{/ Audio Player /}
mediaUrl="https://example.com/audio.mp3"
title="My Audio Track"
/>
{/ Video Player /}
mediaUrl="https://example.com/video.mp4"
/>
{/ File Display /}
mediaUrl="https://example.com/document.pdf"
title="My Document"
/>
>
);
}
`
#### Props
- mediaType (string, required): Type of media ('TEXT', 'MARKDOWN', 'UPLOAD', 'AUDIO', 'VIDEO')content
- (string, optional): Content for TEXT and MARKDOWN typesmediaUrl
- (string, optional): URL for UPLOAD, AUDIO, and VIDEO typestitle
- (string, optional): Title to display
You can also import and use individual editor/player components:
`jsx
import {
MarkdownEditor,
AudioRecorder,
VideoRecorder,
MarkdownPlayer,
AudioPlayer,
VideoPlayer
} from 'react-multimedia-component';
// Markdown Editor
onCancel={() => console.log('Cancelled')}
initialContent="# Start here"
/>
// Audio Recorder
onCancel={() => console.log('Cancelled')}
/>
// Video Recorder
onCancel={() => console.log('Cancelled')}
/>
// Markdown Player
/>
// Audio Player
title="My Track"
/>
// Video Player
type="video"
/>
`
The package exports a MEDIA_TYPES constant with the following values:
`javascript`
{
TEXT: 'TEXT',
MARKDOWN: 'MARKDOWN',
UPLOAD: 'UPLOAD',
AUDIO: 'AUDIO',
VIDEO: 'VIDEO'
}
The components use Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project:
`bash`
npm install -D tailwindcss
Add to your tailwind.config.js:
`javascript`
module.exports = {
content: [
"./src/*/.{js,jsx,ts,tsx}",
"./node_modules/react-multimedia-component/*/.{js,jsx}"
],
// ... rest of config
}
- Modern browsers (Chrome, Firefox, Safari, Edge)
- MediaRecorder API support required for audio/video recording
- getUserMedia API support required for camera/microphone access
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
For issues and feature requests, please use the GitHub issues page.
`jsx
import { useState } from 'react';
import { MultimediaEditor, MultimediaPlayer, MEDIA_TYPES } from 'react-multimedia-component';
function App() {
const [mediaData, setMediaData] = useState(null);
const [isEditing, setIsEditing] = useState(true);
const handleSubmit = async (result) => {
// Handle file uploads
if (result.file) {
const formData = new FormData();
formData.append('file', result.file);
try {
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
});
const data = await response.json();
setMediaData({
type: result.type,
mediaUrl: data.url
});
} catch (error) {
console.error('Upload failed:', error);
}
} else {
// Handle text/markdown content
setMediaData({
type: result.type,
content: result.content
});
}
setIsEditing(false);
};
return (
$3
`jsx
import { useState } from 'react';
import { AudioRecorder } from 'react-multimedia-component';function AudioRecordingApp() {
const [showRecorder, setShowRecorder] = useState(false);
const [audioFile, setAudioFile] = useState(null);
const handleAudioSubmit = (file) => {
setAudioFile(file);
setShowRecorder(false);
// Upload to server
const formData = new FormData();
formData.append('audio', file);
fetch('/api/upload-audio', {
method: 'POST',
body: formData
});
};
return (
{showRecorder && (
onSubmit={handleAudioSubmit}
onCancel={() => setShowRecorder(false)}
/>
)}
{audioFile && (
Recorded: {audioFile.name} ({audioFile.size} bytes)
)}
);
}
``