@arcteryx/components-design-system v0.3.4
@arcteryx/components-design-system
What is it?
Arc'teryx Atomic Design Components is a library of reusable UI components following the principles of Atomic Design. These components are designed to be highly modular and flexible, allowing developers to build consistent and visually appealing user interfaces across different projects.
Install
npm install --save @arcteryx/components-design-system
Usage
const App = () => {
// Sample video data (replace with your own video URL, cover image URL, and label)
const video = {
url: "https://www.example.com/sample_video.mp4",
coverImageUrl: "https://www.example.com/sample_cover_image.jpg",
label: "Sample Video",
};
return (
<div>
{/* Other components or content */}
<Video video={video} />
</div>
);
};
Configuration
Props
The Video component accepts the following props:
className (optional): Additional CSS class name to be applied to the component for custom styling. video (required): An object containing the video data with the following properties: url (string, required): The URL of the video file to be played. coverImageUrl (string, required): The URL of the video thumbnail (cover image). label (string, required): A descriptive label for the video.
Styling
The component uses styled-components to define its styles. You can customize the appearance of the video thumbnail and modal by modifying the styles in the component file.
Important Note
Ensure that you have the required url, coverImageUrl, and label properties set correctly in the video object. If any of these properties are missing or invalid, the component may not function as expected. .
16 days ago
28 days ago
28 days ago
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago