DEV Community: Mathieu THIRY

Creating a Smooth Toggle Switch in React: A Step-by-Step Guide

Mathieu THIRY — Mon, 15 Jul 2024 21:38:39 +0000

👋 Today, we're doing a bit of css with a cool little project: building a toggle switch with a smooth transition using React and TypeScript. The full code is available on CodeSandbox. Let's get started!

The Goal

We're going to create a toggle switch that allows users to switch between gallery and list views. The switch will have a smooth sliding animation and change colors to indicate the active state. Here's what we're aiming for:

Setting Up

First, let's break down the components we'll be using:

A container for our toggle
A sliding background element
Two clickable areas for each view option containing the SVG Icon

The Container

Our main container sets up the overall shape and style of the toggle:



<div
  style={{
    display: "flex",
    borderRadius: "100px",
    backgroundColor: "#0036FF80",
    position: "relative",
    width: "140px",
    height: "32px",
  }}
>
  {/* Icons and clickable areas will go here */}
  {/_ ... _/}
</div>

We're using inline styles here, but feel free to use tailwinds or styled-components.

The Sliding Background

Here's where the magic happens:



<div
  style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "50%",
    height: "100%",
    backgroundColor: "#0036FF",
    borderRadius: "40px",
    transition: "transform 0.3s ease",
    transform: view === "gallery" ? "translateX(0)" : "translateX(100%)",
  }}
/>

This div acts as our sliding background. The key properties are:

position: absolute to take it out of the normal flow
width: 50% to cover half of the toggle
transition: transform 0.3s ease for smooth animation
transform to move the background based on the current view

The Clickable Areas

For each view option, we have a clickable area:



<div
  style={{
    flex: 1,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1,
    cursor: "pointer",
  }}
  onClick={() => setView("gallery")}
>
  <GalleryViewIcon
    style={{ color: view === "gallery" ? "white" : `#FFFFFF80` }}
  />
</div>

The onClick handler updates the view state, and we change the icon color based on whether it's active or not.

Wrapping Up

And there you have it! A smooth, animated toggle switch built with React and TypeScript.

Remember, the key to the smooth transition is in the CSS transition property and the dynamic transform based on the current state. Play around with these values to customize the feel of your toggle! The full code is available on CodeSandbox.

Happy coding 👨‍💻👩‍💻

Creating a Markdown Editor in your react projects

Mathieu THIRY — Wed, 03 Jul 2024 17:54:32 +0000

👋 If you're looking to add a user-friendly markdown editor to your React project, you're in luck. We'll be diving into @uiw/react-md-editor, a powerful library that simplifies the creation of markdown editors. By the end of this post, we'll have recreated a markdown editor similar to the one you use when writing comments on GitHub pull requests! The repo is here and the live website here.

Why pick @uiw/react-md-editor?

@uiw/react-md-editor is a library that gives you a fully-featured markdown editor out of the box. It's ideal for scenarios where you need to provide users with a straightforward way to enter and format text, such as in comment sections.

Some cool features include:

📝 Live, preview and diff mode
🎨 Customizable toolbar with your own styles

Getting Started

First things first, let's install the package:

npm install @uiw/react-md-editor
# or
yarn add @uiw/react-md-editor

Now, let's create a basic markdown editor in a React component:

import React, { useState } from "react";
import MDEditor from "@uiw/react-md-editor";

const MarkdownEditor: React.FC = () => {
  const [value, setValue] = useState("**Hello world!!!**");

  return (
    <div className="container">
      <MDEditor value={value} onChange={(val) => setValue(val || "")} />
    </div>
  );
};

export default MarkdownEditor;

Just like that, you've got a functional markdown editor! 🎉

Customizing Your Editor

Want to add or remove toolbar items? Here's how you can customize the toolbar:

import React, { useState } from "react";
import MDEditor, { commands } from "@uiw/react-md-editor";

const CustomEditor: React.FC = () => {
  const [value, setValue] = useState("# Your custom markdown here");

  return (
    <MDEditor
      value={value}
      onChange={(val) => setValue(val || "")}
      commands={[
        commands.bold,
        commands.italic,
        commands.link,
        // Add or remove commands as needed
      ]}
    />
  );
};

export default MarkdownEditor;

Want to add your own icons ? You can do that too. Here's an example with a custom bold command:

import { BoldIcon } from "../../assets/BoldIcon";

const customBoldCommand = {
  ...commands.bold,
  icon: <BoldIcon />,
};

return (
  <MDEditor
    value={value}
    onChange={(val) => setValue(val || "")}
    commands={[customBoldCommand, commands.italic, commands.link]}
  />
);

Want to use text instead of icons ? Want to have access to the current mode (edit or preview) and change it programmatically ? First you need to create the component that will be used as a button in the toolbar:

const PreviewButton = () => {
  const { preview, dispatch } = useContext(EditorContext);
  const click = () => {
    if (dispatch) {
      dispatch({
        preview: "preview",
      });
    }
  };
  return <button onClick={click}>Preview</button>;
};

This component represents the "Preview" tab in a dual-mode markdown editor, mimicking the interface you'd find when commenting on GitHub. It allows users to switch between composing markdown ("Write" mode) and viewing the formatted result ("Preview" mode).
The component uses React's useContext hook to access preview and dispatch from an EditorContext. It defines a click function that dispatches an action to set the preview state to "preview" when the button is clicked.

After creating your custom button component, you can incorporate it into an object that defines a new preview command for the markdown editor. This object structure allows you to seamlessly integrate your custom functionality into the editor's toolbar.

const customPreviewCommand = {
  name: "custom-preview",
  keyCommand: "custom-preview",
  buttonProps: { "aria-label": "Generate Preview" },
  icon: <PreviewButton />,
};

return (
  <MDEditor
    value={value}
    onChange={(val) => setValue(val || "")}
    commands={[
      customBoldCommand,
      commands.italic,
      commands.link,
      customPreviewCommand,
    ]}
  />
);

Wrapping Up

@uiw/react-md-editor is a fantastic library that can save you tons of time when implementing markdown editors in your React projects. Whether you're building a blog platform, a documentation site, or just need a simple way to handle formatted text input, this library has got you covered.

Have you used @uiw/react-md-editor in your projects? Drop a comment below. The repo is here and the live website here.

Happy coding 👨‍💻👩‍💻

Mastering Redux Toolkit in Your React Projects

Mathieu THIRY — Fri, 22 Dec 2023 13:02:53 +0000

Mastering Redux Toolkit in Your React Projects

Let's dive into creating a To-Do List application using React, TypeScript, and Redux Toolkit. Redux Toolkit is an efficient tool for managing the state in React applications, making it easier and more predictable. We'll learn how to use Redux Toolkit to create a store, dispatch actions, and create reducers. We'll also learn how to use the useSelector and useDispatch hooks to access the state and dispatch actions. By the end of this course, you'll have a solid understanding of how to use Redux Toolkit to manage the state in your React applications. The design is inspired from this great design spotted on figma.

Getting Started

Setting Up Our Project

Let's kick things off by setting up our project. We'll create a new React app using vite with TypeScript support:

npm create vite@latest

Next, we install Redux Toolkit, React-Redux and uuid to generate unique ids for our todos :

npm install @reduxjs/toolkit react-redux uuid @types/uuid

Building Our To-Do List

Creating a Slice with Redux Toolkit

A slice in Redux Toolkit is where we define our reducers and actions. First, let's create a folder features and inside it we create slice. Then, create another folder tasks and inside it, create a file named taskSlice.ts.

import { createSlice } from "@reduxjs/toolkit";
import { v4 as uuidv4 } from "uuid";

export type Task = {
  id: string;
  name: string;
  done: boolean;
};

export type TasksState = {
  tasks: Task[];
};

const initialState: TasksState = {
  tasks: [
    {
      id: uuidv4(),
      name: "Go to the Grocery Store",
      done: false,
    },
  ],
};

export const TasksSlice = createSlice({
  name: "tasks",
  initialState,
  reducers: {
    addTask: (state, action) => {
      const newTask = {
        id: uuidv4(),
        name: action.payload,
        done: false,
      };
      state.tasks = [...state.tasks, newTask];
    },
    // more reducers...
  },
});

export const { addTask } = TasksSlice.actions;

export default TasksSlice.reducer;

Creating a Store with Redux Toolkit

Next, let's create a store using Redux Toolkit. In the src folder, create a folder state and inside a file named store.ts.

import { configureStore } from "@reduxjs/toolkit";
import tasksReducer from "../features/tasks/taskSlice";

export const store = configureStore({
  reducer: {
    list: tasksReducer,
    // more reducers...
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Connecting Our Store to Our App

Now that we have a store, let's connect it to our app. In main.tsx, import the Provider component from React-Redux and the store we just created. Then, wrap the App component with the Provider component and pass in the store as a prop.

import React from "react";
import { Provider } from "react-redux";
import { store } from "./state/store.ts";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Accessing the State with Redux Toolkit

Let's consume the store. In App.tsx, import the useSelector hook from React-Redux. Then, call the useSelector hook and pass in a function that returns the state. Finally, assign the return value to a variable.

import React, { useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "./state/store";
import { Task } from "../../types";

const App = () => {
  const tasks = useSelector((state: RootState) => state.list.tasks);

  return (
    <div>
      {tasks.map((task: Task) => {
        return <TaskItem key={task.id} task={task} />;
      })}
    </div>
  );
};

Dispatching Actions with Redux Toolkit

Now that we have a store, let's dispatch an action. In App.tsx, import the useDispatch hook from React-Redux and the addTask action from our taskSlice. Then, call the useDispatch hook and assign it to a variable. Finally, call the dispatch method on the variable and pass in the addTask action.

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { addTask } from "../../features/tasks/taskSlice";

const App = () => {
  const [newTask, setNewTask] = useState("");

  const dispatch = useDispatch();
  const tasks = useSelector((state: RootState) => state.list.tasks);

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    dispatch(addTask(newTask));
    setNewTask("");
  }

  return (
    <div className="task_wrapper">
      <div className="task_container">
        <form onSubmit={handleSubmit} className="task_form">
          <input
            type="input"
            value={newTask}
            onChange={(event) => setNewTask(event?.target.value)}
            className="form__field"
            placeholder="Add a task"
            name="name"
            id="name"
            required
          />
          <label htmlFor="name" className="form__label">
            Add a task
          </label>
        </form>
      </div>
      <div>
        {tasks.map((task: Task) => {
          return (
            <div key={task.id}>
              <p>{task.name}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
};

Add Reducers with Redux Toolkit

let's add different reducers. In taskSlice.ts, create a new reducer called toggleTask and pass in the state and action as parameters. Then, update the state to toggle the task.

import { createSlice } from "@reduxjs/toolkit";
import { v4 as uuidv4 } from "uuid";
import { Task } from "../../types";

export const TasksSlice = createSlice({
  name: "tasks",
  initialState,
  reducers: {
    addTask: (state, action) => {
      const newTask = {
        id: uuidv4(),
        name: action.payload,
        done: false,
      };
      state.tasks = [...state.tasks, newTask];
    },
    toggleTask: (state, action) => {
      const selectedTask = state.tasks.find(
        (task) => task.id === action.payload.id
      );
      if (selectedTask) selectedTask.done = !selectedTask.done;
    },
    deleteTask: (state, action) => {
      state.tasks = state.tasks.filter((task) => task.id !== action.payload);
    },
  },
});

export const { addTask, toggleTask, deleteTask } = TasksSlice.actions;

Conclusion

And there we have it! By building a simple yet functional To-Do List app, we've seen how these technologies blend together to create efficient and beautiful web applications. I hope you've enjoyed this tutorial and learned something new along the way. The repo is here and the live website here.
Happy coding!

Creating an RSS Feed in your Next.js Project

Mathieu THIRY — Sat, 24 Jun 2023 21:29:23 +0000

Keep Your Audience Informed

Hey there! Are you looking to keep your users up-to-date with the latest content from your Next.js project? One powerful way to achieve this is by implementing an RSS feed. In this blog post, we'll explore how to create an RSS feed in your Next.js project using the magic of the Rss library. By the end, you'll have a solid understanding of how to provide your audience with an easy and convenient way to stay informed.

Why RSS Feeds Matter

Before we jump into the technical details, let's quickly discuss why RSS feeds are still relevant in today's digital landscape. RSS (Really Simple Syndication) allows users to subscribe to content from websites they love, receiving updates in a centralized place without the need to constantly visit each site separately. It's an efficient way for your audience to stay engaged and informed, ensuring they never miss your latest blog posts, news articles, or any other valuable content you provide.

Setting Up the Next.js Project

To begin, let's create a new Next.js project using the Blog Starter example. Open your terminal and run the following command:



npx create-next-app --example blog-starter blog-starter-app

This command will clone the "blog-starter" repository and scaffold a new Next.js project named "blog-starter-app" based on that template. Navigate into the project directory:



cd blog-starter-app

The Blog Starter template provides a solid foundation for building a blog using Next.js. It includes features like blog post pages, a homepage, and a data source to fetch blog content created in markdown locally.

Adding the RSS Feed Functionality

To add an RSS feed to your Next.js project, follow these steps:

Install the rss library by running the following command:



npm install rss

Create a new RSS feed by creating the file utils/rss.ts and adding the following code:



import fs from "fs";
import RSS from "rss";

export default async function generateRssFeed(allPosts) {
  const site_url =
    process.env.NODE_ENV === "production"
      ? "https://nameofwebsite"
      : "http://localhost:3000";

  const feedOptions = {
    title: "Blog posts | RSS Feed",
    description: "Welcome to this blog posts!",
    site_url: site_url,
    feed_url: `${site_url}/rss.xml`,
    image_url: `${site_url}/logo.jpeg`,
    pubDate: new Date(),
    copyright: `All rights reserved ${new Date().getFullYear()}`,
  };

  const feed = new RSS(feedOptions);

  // Add each individual post to the feed.
  allPosts.map((post) => {
    feed.item({
      title: post.title,
      description: post.excerpt,
      url: `${site_url}/posts/${post.slug}`,
      date: post.date,
    });
  });

  // Write the RSS feed to a file as XML.
  fs.writeFileSync("./public/rss.xml", feed.xml({ indent: true }));
}

This code generates an RSS feed by iterating over a collection of blog posts, creating an RSS item for each post, and then writing the resulting XML feed to a file. It writes the generated RSS feed to a file named "rss.xml" in the "./public" directory using the "writeFileSync" method from the "fs" module.

Import our function in the pages/index.tsx file and call it in the getStaticProps() like this:



export const getStaticProps = async () => {
  const allPosts = await getAllPosts([
    "title",
    "date",
    "slug",
    "author",
    "coverImage",
    "excerpt",
  ]);

  generateRssFeed(allPosts);
  return {
    props: { allPosts },
  };
};

Testing the RSS Feed

To test the RSS feed functionality, start your Next.js development server by running:



npm run dev

To generate the file, please access the http://localhost:3000 page, and then open http://localhost:3000/rss.xml in your browser. You should see the XML data representing your RSS feed.

If you use an extension like RSS Feed Reader, it will appear like this:

🥳 Congratulations! You've successfully added an RSS feed to your Next.js project. By keeping your users informed and engaged with your latest content, you're building a stronger connection. Feel free to customize the feed further based on your project's needs.