Build React components with Fluent UI

What is Fluent UI?

Shorthand Props

<Loader label="Fetching data..." />
<Loader label={{ content: 'Fetching data...', size: 'small' }} />

Composition

<Header />
{/* Uses another tag: <h2 class="ui-header" /> */}
<Header as="h2" />
import { Link } from "react-router-dom";
...
<>
<Button type="submit" />
<Image
src="//[via.placeholder.com/300](http://via.placeholder.com/300)"
onLoad={() => alert("Loaded")}
onError={() => alert("Error")}
/>
<Button as={Link} to="/home">
To homepage
</Button>
</>;

Icons

<AppsIcon />

Other components

Creating a video streaming application

npx create-react-app video-streamer
cd video-streamer && npm start
npm install @fluentui/react-northstar --save

Building a Video Streamer component

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider, teamsTheme } from "@fluentui/react-northstar";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider theme={teamsTheme}>
<App />
</Provider>
);
reportWebVitals();
import React, { useEffect, useState } from "react";
import Video from "./components/Video";
import Videolist from "./components/VideoList";
import "./App.css";
import Modal from "./components/Modal";
import { Flex, Segment } from "@fluentui/react-northstar";
function App() {
const [videos, setVideos] = useState([
{
id: "1",
name: "How to build a Todo app",
createdBy: "John Doe",
coverURL: "public/images/2020_MSFT_Icon_Celebration_placeholder.jpg",
description:
"This is a handone on how to build a component UI with FluentIU",
videoURL:
"http://fabricweb.azureedge.net/fabric-website/assets/videos/2020_MSFT_Icon_Celebration.mp4",
createdAt: "12-03-2022 03:40 PM",
},
]);
return (
<Flex gap="gap.small">
<Segment
color="white"
content={
<>
{videos.map((video) => (
<Videolist
video={video}
key={video.id}
changeActive ={changeActive}
/>
))}
</>
}
inverted
/>
<Segment
color="white"
content={
<>
<div className="video">
<Video activeVideo={activeVideo} />
</div>
<Modal
handleSubmit={handleSubmit}
setActiveVideo={setActiveVideo}
setVideoName={setVideoName}
setCoverURL={setVideoURL}
setVideoURL={setCoverURL}
setCreatedBy={setCreatedBy}
setDescription={setDescription}
/>
</>
}
inverted
/>
</Flex>
);
}
export default App;
function handleSubmit(e) {
e.preventDefault();
const newVideo = {
name: VideoName,
coverURL: coverURL,
videoUrl: videoURL,
description: description,
createdAt: Date.now(),
createdBy: createdBy,
};
setVideos([...videos, newVideo]);
}
function changeActive(videoObj) {
setActiveVideo(videoObj);
}
useEffect(() => {
//Play the firt video by default
setActiveVideo(videos[0]);
}, [videos]);
  1. The changeActive the method will enable us to pay for any video by setting it as the active Video.
  2. The handleChange the method will allow us to get inputs from our input forms.
  3. The handleSumit the method will handle our form submission to add a new video to the array of videos.
  4. We create a useState hook, which sets the first Video in our Video as the active Video once the component mounts.
  const [activeVideo, setActiveVideo] = useState({});
const [VideoName, setVideoName] = useState("");
const [coverURL, setCoverURL] = useState("");
const [videoURL, setVideoURL] = useState("");
const [description, setDescription] = useState("");
const [createdBy, setCreatedBy] = useState("");

Creating a Video Component

import React from "react";
import { Video, Text, Flex } from "@fluentui/react-northstar";
function VideoComp(props) {
const {activeVideo} = props;
return (
<Flex column>
<Video
poster={activeVideo?.coverURL}
src={activeVideo?.videoURL}
variables={{
height: "300px",
width: "720px",
}}
/>
<Text color="brand">{activeVideo?.name}</Text>
<Text color="brand">{activeVideo?.description}</Text>
</Flex>
);
}
export default VideoComp;

Open Source Session Replay

Creating a VideoList Component

import React from "react";
import { List } from "@fluentui/react-northstar";
function VideoList(props) {
const { video, changeActive } = props;
return (
<List
navigable
styles={({ theme: { siteVariables } }) => ({
backgroundColor: siteVariables.colorScheme.default.background4,
color: "black",
})}
>
<List.Item
header={video.createdBy}
headerMedia={video.createdAt}
content={video.name}
navigable
index={0}
onClick={() => changeActive(video)}
/>
</List>
);
}
export default VideoList;

Creating a Modal Component

import {
FormInput,
CardBody,
Dialog,
Form,
Card,
FormButton,
} from "@fluentui/react-northstar";
import React, { useState } from "react";
import "../App.css";
function Modal(props) {
const [_, setShowModal] = useState(false);
const {
handleSubmit,
setVideoName,
setCoverURL,
setVideoURL,
setCreatedBy,
setDescription,
} = props;
function handleOpenModal() {
setShowModal(true);
}
return (
<Dialog
content={
<Card>
<CardBody>
<Form onSubmit={handleSubmit}>
<FormInput
label="Video Name"
name="VideoName"
required
showSuccessIndicator={false}
onClick={(e) => setVideoName(e.target.value)}
/>
<FormInput
label="Cover URL"
name="coverURL"
required
showSuccessIndicator={false}
onChange={(e) => setCoverURL(e.target.value)}
/>
<FormInput
label="Created By"
name="createdBy"
required
showSuccessIndicator={false}
onChange={(e) => setCreatedBy(e.target.value)}
/>
<FormInput
label="Video URL"
name="videoURL"
required
showSuccessIndicator={false}
onChange={(e) => setVideoURL(e.target.value)}
/>
<FormInput
label="Description"
name="description"
required
showSuccessIndicator={false}
onChange={(e) => setDescription(e.target.value)}
/>
<FormButton content="Submit" />
</Form>
</CardBody>
</Card>
}
header="Add new video URL"
trigger={
<span className="open" onClick={handleOpenModal}>
+
</span>
}
/>
);
}
export default Modal;

Testing the application

Conclusion

--

--

Software Engineer || Technical Writer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store