Fixing RTL text made with @react-pdf/renderer

Zakher Masri — Tue, 24 Oct 2023 10:21:44 +0000

السلام عليكم 👋

If you're creating a pdf using @react-pdf/renderer and you noticed the Arabic text direction is broken, then you can use the following component (Original)

export const TextRTL = ({ isRTL, style, text }) => {
  return (
    <View
      style={{
        display: "flex",
        flexDirection: isRTL ? "row-reverse" : "row",
        flexWrap: "wrap",
        ...style,
      }}
    >
      {text?.split(" ").map((item) => (
        <Text
          style={{
            ...(isRTL ? { marginLeft: 2.5 } : { marginRight: 2.5 }),
          }}
        >
          {item}
        </Text>
      ))}
    </View>
  );
};

Before:

After:

How to set dynamic logo in nextra based on theme mode.

Zakher Masri — Fri, 06 Oct 2023 19:52:45 +0000

If you're using nextra to setup your documentation pages and you want to set a different logo for each theme mode (dark & light). You can simply do it by getting the resolvedTheme from useTheme hook provided by nextra-theme-docs and use it to show a different logo conditionally in your logo jsx component inside theme.config.tsx

This is how your theme.config.tsx would look like:

import React from "react";
import { DocsThemeConfig, useTheme } from "nextra-theme-docs";
import Image from "next/image";

const config: DocsThemeConfig = {
  logo: () => {
    const { resolvedTheme } = useTheme();
    return (
      <Image
        alt="My Logo"
        height={100}
        width={150}
        src={resolvedTheme === "dark" ? "path/to/white/logo" : "path/to/black/logo"}
      />
    );
  },

//... the rest of your nextra theme config
};

export default config;

That's it.

DEV Community: Zakher Masri

Fixing RTL text made with @react-pdf/renderer

Before:

After:

How to set dynamic logo in nextra based on theme mode.