In Javascript, I normally use `===` (triple equals) 99% of the time. However, I've found that one of the great remaining use cases for `==` (double equals) is when I want to check whether the value is `null` or `undefined`.

```js
// A variable that can be a number, `null` or `undefined`
let myAge = 42
myAge == null // false
myAge = null
myAge == null // true
myAge = undefined
myAge == null // true

// The triple equals version is more verbose
myAge = 42
myAge === null || myAge === undefined // false
myAge = null
myAge === null || myAge === undefined // true
myAge = undefined
myAge === null || myAge === undefined // true
```

I also use it a lot in TypeScript when the value is nullable and optional.

```ts
// The `age` argument is nullable and also optional
function isAdult(age?: number | null) {
  if(age == null) {
    throw new Error('You need to provide your age')
  }
  return age >= 18
}
```

Happy coding!


JS Tip: `== null` is my favorite use case of double equals

## Situation

Imagine that you want to render different components based on the `fetchStatus` prop. Its possible values are `loading`, `success`, and `error`.

```tsx
function BlogContent({
  fetchStatus,
  data,
}: {
  fetchStatus: 'loading' | 'success' | 'error'
  data: string | null
}) {
  // Conditional rendering here
  // ...
}
```

## First Attempt

Nested ternary! I see this approach being used in too many codebases. I think this approach should be avoided when there are more than 2 possible rendering branches, as it's not good for readability in my opinion.

```tsx
function BlogContent({
  fetchStatus,
  data,
}: {
  fetchStatus: 'loading' | 'success' | 'error'
  data: string | null
}) {
  // Nested ternary. This should be avoided.
  return (
    <div>
      {fetchStatus === 'loading' ? (
        <span>Loading...</span>
      ) : fetchStatus === 'success' ? (
        <p>{data}</p>
      ) : (
        <span>There was an error</span>
      )}
    </div>
  )
}
```

## A Better Approach: Extract the Condition from JSX

A better approach is to extract the condition from JSX and store the result in a variable, e.g. `content` in this case.

```tsx
function BlogContent({
  fetchStatus,
  data,
}: {
  fetchStatus: 'loading' | 'success' | 'error'
  data: string | null
}) {
  // Extract the condition from JSX and store the result in "content"
  let content
  if (fetchStatus === 'loading') {
    content = <span>Loading...</span>
  } else if (fetchStatus === 'success') {
    content = <p>{data}</p>
  } else {
    content = <span>There was an error</span>
  }
  // Use "content" variable in JSX
  return <div>{content}</div>
}
```

This approach is good enough. However, what if I want to put the full if-else condition right inside the JSX? Since it allows me to easily scan the code from top to bottom without having to jump around the lines.

## Making Use of switch-case Inside JSX

Because we can only put an expression inside JSX, we need a little trick to overcome this limitation: **IIFE to the rescue!**

```tsx
function BlogContent({
  fetchStatus,
  data,
}: {
  fetchStatus: 'loading' | 'success' | 'error'
  data: string | null
}) {
  // Using IIFE to put the condition inside JSX
  return (
    <div>
      {(() => {
        switch (fetchStatus) {
          case 'loading':
            return <span>Loading...</span>
          case 'success':
            return <p>{data}</p>
          case 'error':
            return <span>There was an error</span>
          default:
            throw new Error('There is an unhandled case')
        }
      })()}
    </div>
  )
}
```

That's a little tip for today. Happy coding everyone!


When you need to conditionally render a component based on multiple conditions

React Tip: Making use of switch-case in JSX

## What is "Prop Drilling"

Prop drilling is passing props through intermediary components to reach the target component, which is the actual consumer. Consider the code below:

```js
function App() {
  return <Parent />
}

function Parent() {
  const [count, setCount] = useState(0)
  return <Child count={count} />
}

function Child({ count }) {
  return <GrandChild count={count} />
}

function GrandChild({ count }) {
  return <div>Count is {count}</div>
}
```

![what is prop drilling](https://res.cloudinary.com/pob/image/upload/v1680201210/next-blog/prod/sv6gsmqavq35o4aesggz.png)

In this example, `count` is passed through `<Child/>` before it reaches `<GrandChild/>`. The `<Child/>` component does not actually use the `count` prop but simply forwards it to the `<GrandChild/>`. This is "Prop Drilling".

## Solutions

### Option 1: Do nothing

Prop drilling is not always a problem. If we have only a few levels of components, it is simpler and more explicit to pass the props down. This also makes it clear what the inputs of each component are, as if they were arguments of a function.

### Option 2: Component composition

We can directly pass the prop to the target component by making use of `children` prop.

```js
function App() {
  return <Parent />
}

function Parent() {
  const [count, setCount] = useState(0)
  return (
    // We don't need to pass `count` prop to <Child/> anymore
    <Child>
      {/* Directly pass `count` to <GrandChild/> */}
      <GrandChild count={count} />
    </Child>
  )
}

// Make use of `children'
function Child({ children }) {
  return <>{children}</>
}

function GrandChild({ count }) {
  return <div>Count is {count}</div>
}
```

![component composition](https://res.cloudinary.com/pob/image/upload/v1680201241/next-blog/prod/xxnsdcvsvmu7lsphncej.png)

Note that in this case, `<GrandChild/>` does not accept any props from `<Child/>`.

But, what if we want to pass some props from `<Child/>` to `<GrandChild/>`? That's where option 3 comes in.

### Option 3: Render prop

By using this pattern, `<GrandChild/>` can accept different props from multiple parent components.

```js
function App() {
  return <Parent />
}

function Parent() {
  const [count, setCount] = useState(0)
  return (
    <Child
      // Render prop
      // <Child/> will pass `unit` to this function
      renderText={(unit) => {
        // - Directly pass `count` to <GrandChild/>
        // - Grab `unit` from the function arg and pass it to <GrandChild/> as well
        return <GrandChild count={count} unit={unit} />
      }}
    />
  )
}

function Child({ renderText }) {
  const [unit, setUnit] = useState('cat(s)')
  // Call the render prop by passing `unit` as an arg
  return <>{renderText(unit)}</>
}

function GrandChild({ count, unit }) {
  return (
    <div>
      Count is {count} {unit}
    </div>
  )
}
```

![render prop](https://res.cloudinary.com/pob/image/upload/v1680201268/next-blog/prod/gwykp4jwdqxqmb9f6lpw.png)

The Render Prop pattern may take some time to understand if you are not familiar with it.

### Option 4: Context

Using Context should be the last resort as it changes the way we pass props from explicit to implicit. This approach can be useful in certain situations, but it is important to consider the downsides of using Context and to explore alternative options before resorting to it.

```js
function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  )
}

const CountContext = createContext(null)

function Parent({ children }) {
  const [count, setCount] = useState(0)
  return <CountContext.Provider value={count}>{children}</CountContext.Provider>
}

function Child() {
  // There is no prop explicitly passed to <GrandChild/>
  return <GrandChild />
}

function GrandChild() {
  // Implicitly receive `count` from Context instead of explicitly receive it from props
  const count = useContext(CountContext)
  return <div>Count is {count}</div>
}
```

![context](https://res.cloudinary.com/pob/image/upload/v1680201299/next-blog/prod/lswbslsuit6a9ismzzth.png)


React Context should not be the only option for resolving the issue of "prop drilling". You may want to consider these alternative approaches.

Prop Drilling issue: Explore these options before using useContext()

What might not be obvious when using `react-query` is that the "error" `status` is actually divided into two distinct states: "loading error" and "refetch error". In this article, we will take a closer look at these two error states and how to handle them correctly.

## The single "error" state in pre-`react-query` era

In the past, when we fetched data from a REST endpoint using `useEffect()`, we typically had only three states: "loading", "error", and "success". While state handling is simple, this `useEffect()` approach had its limitations, including the lack of caching and refetch capabilities.

![3 states when using useEffect](https://res.cloudinary.com/pob/image/upload/v1677429059/next-blog/prod/r8ul0cdrk6apudo1ga4l.png)

## In `react-query`, the single "error" `status` consists of two states

At first glance, if you use the previous mental model or look at the `status` provided by `useQuery()`, you might think that there is only one "error" state.

```js
const query = useQuery(...)
console.log(query.status) // 'loading' | 'error' | 'success'
```

This is incorrect. As `react-query` adds more features like `refetchOnWindowFocus`, it also increases the total number of possible states. For the purposes of this article, we will only focus on the "error" `status`.

As shown in the diagram below, the "error" `status` actually consists of two different states: "loading error" and "refetch error". This information is crucial to correctly design your UI. In some cases, we may handle both of them similarly and display the same UI. However, there are some scenarios that may cause unexpected UI states if we don't handle them separately.

![react-query has two different error states](https://res.cloudinary.com/pob/image/upload/v1677518662/next-blog/prod/quwhsq6jrbskzrpy9r8h.png)

## Scenario

Suppose we are building a website for users to send their love messages to Pokemons. The user journey is as follows:

1. A user navigates to the website.
2. Components are mounted, and `useQuery()` fetches a list of Pokemons through a REST endpoint.
3. The UI displays each Pokemon name in a card.
4. Each card can be expanded. When it's expanded, there is a textarea for sending a message.

https://res.cloudinary.com/pob/video/upload/v1677429216/next-blog/prod/y0tz5kdiheg5dk45sfkl.mp4

The happy path looks good. But, how can we handle unhappy paths? Let's explore two different approaches.

## Approach 1: Render elements based on `status` only

In this approach, we handle states by checking for `status` as we normally would. It works fine and covers the "error" `status`, except in one edge case. What if:

1. A user visits the website.
2. The first fetch for Pokemon list succeeds.
3. The user clicks on one of the "Expand" buttons.
4. A textarea shows up.
5. The user types something but does not submit yet.
6. The user pauses and goes to another browser window/tab.
7. The internet connection drops.
8. The user comes back, and `refetchOnWindowFocus` kicks in.
9. **Issue**: All content and the textarea disappeared. The user lost their in-progress message.

Let's see the code and the result.

```ts
function App() {
  const query = useQuery(
    ['pokemons'],
    async () => {
      const {
        data,
      }: {
        data: { results: { name: string; url: string }[] }
      } = await axios.get('https://pokeapi.co/api/v2/pokemon')
      return { pokemons: data.results }
    },
    { retry: 0 }
  )
  return (
    <div>
      <h1>Home Page</h1>
      {(() => {
        switch (query.status) {
          case 'loading':
            return <div>Status: Loading...</div>
          case 'error':
            return <div>Status: Error</div>
          case 'success':
            return query.data.pokemons.map((poke) => {
              return <Card key={poke.name} pokeName={poke.name} />
            })
        }
      })()}
    </div>
  )
}
```

https://res.cloudinary.com/pob/video/upload/v1677429241/next-blog/prod/kj8vuev4nng0jpe0weiu.mp4

Codesandbox: https://codesandbox.io/s/rq-error-1-24f9n2?file=/src/App.tsx

In the example above, I imitated an internet connection drop by blocking the request. You will see that a "refetch error" blows away the whole page since we treat it like an initial "loading error". What can we do to preserve the textarea even if there is a "refetch error"?

## Approach 2: Fix the issue in Approach 1 by handling "loading error" and "refetch error" separately

In Approach 1, we saw that relying solely on the `status` can cause issues when dealing with different error states. In this approach, we will instead handle each error state separately using the help of `isLoadingError` and `isRefetchError`.

```ts
function App() {
  // ...

  return (
    <div>
      <h1>Home Page</h1>
      {/* ------ Handle each error state differently ------ */}
      {(() => {
        if (query.status === 'loading') return <div>Status: Loading...</div>

        // "loading error": no data displayed
        if (query.isLoadingError) return <div>Status: {query.status}</div>

        // "refetch error": display data in the cache, don't tear down the page
        if (query.isRefetchError || query.status === 'success') {
          return query.data.pokemons.map((poke) => {
            return <Card key={poke.name} pokeName={poke.name} />
          })
        }
        
        throw new Error('Unhandled state!!!')
      })()}
      {/* -------------------------------------------------- */}
    </div>
  )
}
```

https://res.cloudinary.com/pob/video/upload/v1677429265/next-blog/prod/hd9xkjssdfsmrogmtvxt.mp4

Codesandbox: https://codesandbox.io/s/rq-error-2-92s446?file=/src/App.tsx

By handling "loading error" and "refetch error" state separately, we ensure that our users can continue writing their message even if they switch browser tabs and lose internet connectivity.

## Summary

`react-query` comes with their wonderful features like `refetchOnWindowFocus`. It's also important to understand that there will be more possible states created by these features. Although this article mainly focuses on "error" `status`, the other `status` actually consist of different states as well. This is mentioned in [the official documentation](https://tanstack.com/query/latest/docs/react/guides/queries#why-two-different-states).

> Background refetches and stale-while-revalidate logic make all combinations for `status` and `fetchStatus` possible. For example:
>
> - a query in "success" `status` will usually be in "idle" `fetchStatus`, but it could also be in "fetching" if a background refetch is happening.
> - a query that mounts and has no data will usually be in "loading" `status` and "fetching" `fetchStatus`, but it could also be "paused" if there is no network connection.
>
> So keep in mind that a query can be in loading state without actually fetching data. As a rule of thumb:
>
> - The `status` gives information about the data: Do we have any or not?
> - The `fetchStatus` gives information about the `queryFn`: Is it running or not?


The "error" status is actually divided into "loading error" state and "refetch error" state

In react-query, when you handle "error" status, you actually handle two different error states

NextAuth.js can be used either with or without a database. In this article, we will explain the case where no database is involved. Once you have a good understanding of the mechanism behind NextAuth.js, plugging in a database will not be much different.

## What happens when a user logs in

![log-in flow diagram](https://res.cloudinary.com/pob/image/upload/v1676051562/next-blog/prod/ggs5xdech5kplfpumfoo.png)

Note:
- There are 3 parties involved:
	1. Browser, a.k.a. a user, a.k.a. a client-side of Next.js
	2. Serverless, a.k.a. a server-side of Next.js
	3. Auth0, an OAuth provider
- Our Next.js code runs on `1.` and `2.`. So these 2 parties are our website. We can fully control both.
- On the other hand, `3.` can be any OAuth provider, such as GitHub or Google. This is an external website that we need to cooperate.

Step-by-step explanation:
1. A user (browser) clicks "Log in". The browser will make a request to our Next.js serverless. The URL destination depends on the OAuth provider, e.g. `api/auth/signin/auth0`.
2. The serverless responds with a redirect status code.
3. The browser then follows the redirection, navigate away from our website, and land on Auth0 website.
4. The user (who is using the browser) is asked to log in to Auth0. If success, Auth0 will respond with another redirection and also attach an access code for using in the next step. Moreover, Auth0 also set cookies to remember a session between the browser and Auth0. Note that this is not the session between the browser and the serverless.
5. The browser follows the redirection and navigate back to our website. The destination URL is something like `api/auth/callback/auth0?code=123`. It is sending the access code to the serverless.
6. The serverless does not immediately send a response back yet. It instead makes a request to Auth0, giving the access code in exchange for an access token.
7. Auth0 responds with the access token to the serverless.
8. After receiving the access token from Auth0, the serverless then sends a response back to the browser, set cookies, and remember the session between the browser and the serverless. Now the user is logged in successfully.

## What happens when the page calls API routes (after the user has logged in)

![calling api flow diagram](https://res.cloudinary.com/pob/image/upload/v1676051742/next-blog/prod/ykrrszdkdjz1x8y0lkzd.png)

Note:
- NextAuth's `useSession()` runs on the Next.js client-side (browser)
- NextAuth's `getServerSession()` runs on the Next.js server-side (serverless)
- If our website need to call an external API endpoint, e.g. `https://external-domain.com/api`, we may need to proxy it through our API routes (serverless). So, it would be:
	```
	Browser
	🡣 (cookies)
	Serverless, e.g. my-domain.com/api/proxy 
	Get an access token on the server side
	🡣 (access token)
	external-domain.com/api
	```


What happens when a user clicks "Log in"?

Understand NextAuth.js flow

## TLDR

```css
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* colors */
  --text-color: #333333;
  --bg-color: #f1f5ef;
  --link-text-color: #0070f3;
  --button-text-color: white;
  --button-bg-color: #7c3aed;
  --button-hover-bg-color: #c4b5fd;

  /* line-height */
  --paragraph-line-height: 1.5;

  overflow-wrap: break-word;
  tab-size: 2;
  color: var(--text-color);
  background-color: var(--bg-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-end: 1rem;
}

p,
ul {
  line-height: var(--paragraph-line-height);
  margin-block-end: 1rem;
}

a {
  color: var(--link-text-color);
  text-decoration: none;
}
a:hover,
a:focus,
a:active {
  text-decoration: underline;
}

button {
  padding: 0.25rem 0.5rem;
  color: var(--button-text-color);
  background-color: var(--button-bg-color);
  border: none;
  border-radius: 0;
  cursor: pointer;
}
button:focus,
button:hover,
button:active {
  background-color: var(--button-hover-bg-color);
}

img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}
```

## Explanation

```css
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
```

- `box-sizing: border-box` is the most important one. It even should be browser's default.
- For margin and padding, I like to remove them all and start with zero space. Later, I will gradually add it to each tag.

---

```css
body {
  /* all possible colors in your website */
  --text-color: #333333;
  --bg-color: #f1f5ef;
  --link-text-color: #0070f3;
  --button-text-color: white;
  --button-bg-color: #7c3aed;
  --button-hover-bg-color: #c4b5fd;
  /* ... other colors */

  /* line-height */
  --paragraph-line-height: 1.5;

  overflow-wrap: break-word;
  tab-size: 2;
  color: var(--text-color);
  background-color: var(--bg-color);
}
```

- I think all possible colors in our website should be centralized in a single place. I use CSS variables to define all values here. These variables will be used across all css files.
- Optionally, you can centralize `line-height`, `z-index`, or spacing here as well.
- `overflow-wrap: break-word` to prevent a horizontal scroll when there is a long text, e.g. URL, and the screen size is small.
- `tab-size: 2` for display a tab character as 2 spaces. The tab character might be appeared in `textarea` and `pre` tags.

---

```css
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-end: 1rem;
}

p,
ul,
ol {
  line-height: var(--paragraph-line-height);
  margin-block-end: 1rem;
}
```

- For `margin-block-end` (a.k.a. `margin-bottom`), I think `1rem` looks good for headings, paragraph, and list.
- However, for `line-height`, I think the browser's default only looks good on headings. It's too tight for others. So, I set it to `1.5` for paragraph and list.

---

```css
a {
  color: var(--link-text-color);
  text-decoration: none;
}
a:hover,
a:focus,
a:active {
  text-decoration: underline;
}
```

- I use my custom color for a normal-state anchor tag. This will also eliminate all browser's default colors for other states. In other words, all `:hover`, `:focus`, `:active`, `:visited` states will be the same `color` as a normal state.
- The `outline` when a user navigates by pressing a tab key, however, will not be replaced. It's still using the browser's default style.

---

```css
button {
  padding: 0.25rem 0.5rem;
  color: var(--button-text-color);
  background-color: var(--button-bg-color);
  border: none;
  border-radius: 0;
  cursor: pointer;
}
button:focus,
button:hover,
button:active {
  background-color: var(--button-hover-bg-color);
}
```

- I replace most of the browser's default style for `button` tag. This also makes our button style stays consistence across all browsers / OS.
- Similar to `a` tag, the `outline` is not replaced and still using the browser's default.

---

```css
img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}
```

- Horizontally center an image.
- In case the image's width is wider than its container, `max-width: 100%` will prevent overflow issue.

---


The bare minimum CSS reset that I always use to start with

My CSS reset with line-by-line explanation

## Part 1: Vite + React + Typescript

1. Initialize the project using `pnpm`
```bash
pnpm create vite
```
2. Follow the prompts, select `react` and `typescript` template
3. Start a dev server
```bash
pnpm run dev
```

## Part 2: Vitest + react-testing-library(i.e. RTL)

1. Install `vitest`, RTL and other necessary packages using `pnpm`
```bash
pnpm add -D vitest @testing-library/react @testing-library/user-event @testing-library/dom jsdom @testing-library/jest-dom @types/testing-library__jest-dom
```
2. Edit `vite.config.ts` file to be like this
```ts
/// <reference types="vitest" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
	plugins: [react()],
	test: {
		// now we can call test(), expect() in test files without needing to `import` them
		globals: true,

		// required environment to run RTL
		environment: 'jsdom',

		// a setup file where we will add more settings
		setupFiles: './src/setupTest.ts',

		// you might want to disable it, if you don't
		// have tests that rely on CSS since parsing CSS is slow
		css: true,
	},
})
```
3. Create `./src/setupTest.ts` file
```ts
import { afterEach, expect } from 'vitest'
import { cleanup } from '@testing-library/react'
import matchers from '@testing-library/jest-dom/matchers'

// enable `expect(...).toBeInTheDocument()`, etc.
expect.extend(matchers)

// unmount all components which are rendered by `render(...)`
afterEach(() => {
	cleanup()
})
```
4. The following is an example of a test file (`*.test.tsx`)
```ts
// `./src/Button.test.tsx`

import { Button } from './Button'
import { myFunction as mockMyFunction } from './myFunction'
import { render, screen } from '@testing-library/react'
import { vi, beforeEach } from 'vitest'
import userEvent from '@testing-library/user-event'
	
// how to mock a module using vitest
// assume that this module is used inside <Button/> comp
vi.mock('./myFunction', () => {
	return { myFunction: vi.fn(() => 'mock text') }
})

// other options are resetAllMocks(), restoreAllMocks()
beforeEach(() => {
	vi.clearAllMocks()
})

test('The first test', async () => {
	// how to mock a function using vitest
	const mockOnClick = vi.fn()
	
	render(<Button num={5} onClick={mockOnClick} />)
	expect(screen.getByText(/Something/)).toBeInTheDocument()
	await userEvent.click(screen.getByText(/Something/))
	
	// inspect the mocked module
	expect(mockMyFunction).toBeCalledTimes(1)
	expect(mockMyFunction).toBeCalledWith(5)
	// inspect the mocked function
	expect(mockOnClick).toBeCalledTimes(1)
	expect(mockOnClick).toBeCalledWith('mock text')
})
```
5. Run all tests
```bash
pnpm vitest
```
6. Optionally, add a new field in `scripts` (`package.json` file) and run the test with `pnpm run test` instead.
```json
"scripts": {
	// ...
	"test": "vitest"
},
```


Let's start a new SPA project using Vite, React, Typescript, Vitest and react-testing-library

[How to] Set up a React app with Vite

We will walk through steps to start a new Node.js project. The following are tools including in our project.

- vanilla javascript (no typescript)
- `eslint` for catching bugs
- `jest` for running tests

Note that we will use `commonjs` module instead of `esm` because `jest` does not fully support `esm` yet as of this writing(Feb, 2023).

## Steps

1. Initialize the project.
```bash
npm init
```
2. Install types for Node.js to make vscode intellisense works properly, e.g. while typing `process.env`, `require()`, etc.
```bash
npm install --save-dev @types/node
```
3. Initialize ESLint.
```bash
npm init @eslint/config
```
4. Select `commonjs` as a module, `node` as a runtime environment, and `javascript` language (not `typescript`).
5. Install Jest. Plus, install its type for vscode intellisense.
```bash
npm install --save-dev jest @types/jest
```
6. To make ESLint understands Jest's global variables such as `test()`, `expect()`, etc., edit `.eslintrc.js` file.
```js
env: {
	// ...
	jest: true, // <------ add this line
},
```
7. Make sure we don't have `"type": "module"` in `package.json` file since we want to use `commonjs`, not `esm`.
8. Write javascript as you want, every file is `*.js`. Test files are in `*.test.js` pattern.
9. Use `require()` and `module.exports`, not `import`/`export`.
10. Run any js file using `node filename.js`. Run tests using `npx jest`.

## For Typescript

- Replace `node` with `ts-node` or `tsx`(preferred)
- Replace `jest` with `ts-jest` or `vitest`
- Start with setting `tsconfig.json` to compile to `commonjs`



Vanilla Javascript, ESLint, and Jest

[How to] Setup a Node.js project

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At elementum eu facilisis sed. Sagittis orci a scelerisque purus semper eget duis at tellus. Ornare massa eget egestas purus viverra accumsan in nisl nisi. Purus sit amet luctus venenatis lectus magna. Posuere ac ut consequat semper viverra nam libero justo. Facilisi cras fermentum odio eu. Morbi quis commodo odio aenean sed. Orci sagittis eu volutpat odio facilisis mauris sit. Tellus integer feugiat scelerisque varius morbi enim.

![test image](https://res.cloudinary.com/pob/image/upload/v1675773660/next-blog/prod/eguvbyhpbkpraty8th3t.png)

Long text trying to make a horizontal scroll `112321312dfdafdsajdfdafdsafadfafdfljslafjlkdfadsf4456LoremipsumdolorsitametLoremipsumdolorsitamet112321312dfdafdsajdfdafdsafadfafdfljslafjlkdfadsf4456LoremipsumdolorsitametLoremipsumdolorsitamet` 112321312dfdafdsajdfdafdsafadfafdfljslafjlkdfadsf4456LoremipsumdolorsitametLoremipsumdolorsitamet112321312dfdafdsajdfdafdsafadfafdfljslafjlkdfadsf4456LoremipsumdolorsitametLoremipsumdolorsitamet

## Heading2

### Heading3

- 📑 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At elementum eu facilisis sed.
- ♻️ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At elementum eu facilisis sed. 
	```
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At elementum eu facilisis sed. 
	```
- 🚧 Lorem ipsum dolor sit amet  
	Lorem ipsum dolor sit amet  
	Lorem ipsum dolor sit amet 
- 🚘 **Bold text** [link to Next.js](https://nextjs.org/)

### Quick Start

```bash
npm i awesome-package
```

### Using image as a link

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/markdown-editor-for-react-izdd6?fontsize=14&hidenavigation=1&theme=dark)

[![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-md-editor/)

[![Open in Gitee gh-pages](https://img.shields.io/badge/Open%20In-Gitee%20gh--pages-blue?logo=web)](https://uiw.gitee.io/react-md-editor/)

```jsx mdx:preview
import React from "react";
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
      />
      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
    </div>
  );
}
```

### Special Markdown syntax

**Supports for CSS Style**

Use HTML comments `` to let Markdown support style customization.

```markdown
## Title


Markdown Supports **Style**
```

**Ignore content display via HTML comments**

Shown in GitHub readme, excluded in HTML.

```markdown
# Hello World

Hello World

Good!
```

Output:

```html
<h1>Hello World</h1>

<p>Good!</p>
```

### Security

Please note markdown needs to be sanitized if you do not **completely trust** your authors.
Otherwise, your app is vulnerable to XSS. This can be achieved by adding [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize) as a plugin.

```jsx mdx:preview
import React from "react";
import MDEditor from '@uiw/react-md-editor';
import rehypeSanitize from "rehype-sanitize";

export default function App() {
  const [value, setValue] = React.useState(`**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>`);
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
        previewOptions={{
          rehypePlugins: [[rehypeSanitize]],
        }}
      />
    </div>
  );
}
```

### Custom Toolbars

```jsx mdx:preview
import React from "react";
import MDEditor, { commands } from '@uiw/react-md-editor';

const title3 = {
  name: 'title3',
  keyCommand: 'title3',
  buttonProps: { 'aria-label': 'Insert title3' },
  icon: (
    <svg width="12" height="12" viewBox="0 0 520 520">
      <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
    </svg>
  ),
  execute: (state, api) => {
    let modifyText = `### ${state.selectedText}\n`;
    if (!state.selectedText) {
      modifyText = `### `;
    }
    api.replaceSelection(modifyText);
  },
};

const title2 = {
  name: 'title2',
  keyCommand: 'title2',
  render: (command, disabled, executeCommand) => {
    return (
      <button 
        aria-label="Insert title2"
        disabled={disabled}
        onClick={(evn) => {
          // evn.stopPropagation();
          executeCommand(command, command.groupName)
        }}
      >
        <svg width="12" height="12" viewBox="0 0 520 520">
          <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
        </svg>
      </button>
    )
  },
  execute: (state, api) => {
    let modifyText = `## ${state.selectedText}\n`;
    if (!state.selectedText) {
      modifyText = `## `;
    }
    api.replaceSelection(modifyText);
  },
}

export default function App() {
  const [value, setValue] = React.useState("Hello Markdown! `Tab` key uses default behavior");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
        commands={[
          // Custom Toolbars
          title3, title2,
          commands.group([commands.title1, commands.title2, commands.title3, commands.title4, commands.title5, commands.title6], {
            name: 'title',
            groupName: 'title',
            buttonProps: { 'aria-label': 'Insert title'}
          }),
          commands.divider,
          commands.group([], {
            name: 'update',
            groupName: 'update',
            icon: (
              <svg viewBox="0 0 1024 1024" width="12" height="12">
                <path fill="currentColor" d="M716.8 921.6a51.2 51.2 0 1 1 0 102.4H307.2a51.2 51.2 0 1 1 0-102.4h409.6zM475.8016 382.1568a51.2 51.2 0 0 1 72.3968 0l144.8448 144.8448a51.2 51.2 0 0 1-72.448 72.3968L563.2 541.952V768a51.2 51.2 0 0 1-45.2096 50.8416L512 819.2a51.2 51.2 0 0 1-51.2-51.2v-226.048l-57.3952 57.4464a51.2 51.2 0 0 1-67.584 4.2496l-4.864-4.2496a51.2 51.2 0 0 1 0-72.3968zM512 0c138.6496 0 253.4912 102.144 277.1456 236.288l10.752 0.3072C924.928 242.688 1024 348.0576 1024 476.5696 1024 608.9728 918.8352 716.8 788.48 716.8a51.2 51.2 0 1 1 0-102.4l8.3968-0.256C866.2016 609.6384 921.6 550.0416 921.6 476.5696c0-76.4416-59.904-137.8816-133.12-137.8816h-97.28v-51.2C691.2 184.9856 610.6624 102.4 512 102.4S332.8 184.9856 332.8 287.488v51.2H235.52c-73.216 0-133.12 61.44-133.12 137.8816C102.4 552.96 162.304 614.4 235.52 614.4l5.9904 0.3584A51.2 51.2 0 0 1 235.52 716.8C105.1648 716.8 0 608.9728 0 476.5696c0-132.1984 104.8064-239.872 234.8544-240.2816C258.5088 102.144 373.3504 0 512 0z" />
              </svg>
            ),
            children: ({ close, execute, getState, textApi }) => {
              return (
                <div style={{ width: 120, padding: 10 }}>
                  <div>My Custom Toolbar</div>
                  <button type="button" onClick={() => console.log('> execute: >>>>>', getState())}>State</button>
                  <button type="button" onClick={() => close()}>Close</button>
                  <button type="button" onClick={() => execute()}>Execute</button>
                </div>
              );
            },
            execute: (state, api)  => {
              console.log('>>>>>>update>>>>>', state)
            },
            buttonProps: { 'aria-label': 'Insert title'}
          }),
        ]}
      />
    </div>
  );
}
```

### Support Custom Mermaid Preview

Using [mermaid](https://github.com/mermaid-js/mermaid) to generation of diagram and flowchart from text in a similar manner as markdown

```bash
npm install mermaid
```

```jsx mdx:preview
import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import MDEditor from "@uiw/react-md-editor";
import mermaid from "mermaid";

const mdMermaid = `The following are some examples of the diagrams, charts and graphs that can be made using Mermaid and the Markdown-inspired text specific to it. 

\`\`\`mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
\`\`\`

\`\`\`mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
\`\`\`
`;

const randomid = () => parseInt(String(Math.random() * 1e15), 10).toString(36);
const Code = ({ inline, children = [], className, ...props }) => {
  const demoid = useRef(`dome${randomid()}`);
  const code = getCode(children);
  const demo = useRef(null);
  useEffect(() => {
    if (demo.current) {
      try {
        const str = mermaid.render(demoid.current, code, () => null, demo.current);
        // @ts-ignore
        demo.current.innerHTML = str;
      } catch (error) {
        // @ts-ignore
        demo.current.innerHTML = error;
      }
    }
  }, [code, demo]);

  if (
    typeof code === "string" && typeof className === "string" &&
    /^language-mermaid/.test(className.toLocaleLowerCase())
  ) {
    return (
      <code ref={demo}>
        <code id={demoid.current} style={{ display: "none" }} />
      </code>
    );
  }
  return <code className={String(className)}>{children}</code>;
};

const getCode = (arr = []) => arr.map((dt) => {
  if (typeof dt === "string") {
    return dt;
  }
  if (dt.props && dt.props.children) {
    return getCode(dt.props.children);
  }
  return false;
}).filter(Boolean).join("");

export default function App() {
  const [value, setValue] = useState(mdMermaid);
  return (
    <MDEditor
      onChange={(newValue = "") => setValue(newValue)}
      textareaProps={{
        placeholder: "Please enter Markdown text"
      }}
      height={500}
      value={value}
      previewOptions={{
        components: {
          code: Code
        }
      }}
    />
  );
}
```

### Support Nextjs

Use examples in [nextjs](https://nextjs.org/). [`#52`](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341) [`#224`](https://github.com/uiwjs/react-md-editor/issues/224#issuecomment-901112079)

### Sequence of image as a link without a new line

[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/nextjs-example-react-md-editor-qjhn7?fontsize=14&hidenavigation=1&theme=dark) [![Open in StackBlitz](https://img.shields.io/badge/Open%20In-StackBlitz-green)](https://stackblitz.com/edit/nextjs-react-md-editor?embed=1&file=pages/index.js&hideExplorer=1&hideNavigation=1&theme=dark) [![#52](https://img.shields.io/github/issues/detail/state/uiwjs/react-md-editor/52)](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341) [![#224](https://img.shields.io/github/issues/detail/state/uiwjs/react-md-editor/224)](https://github.com/uiwjs/react-md-editor/issues/224#issuecomment-901112079)

### Props

- ~~`renderTextarea?: (props, opts) => JSX.Element;`~~: `@deprecated` Please use ~~`renderTextarea`~~ -> `components`. Use div to replace TextArea or re-render TextArea. [#193](https://github.com/uiwjs/react-md-editor/issues/193)
- `components`: re-render textarea/toolbar element. [#419](https://github.com/uiwjs/react-md-editor/issues/419)
    - `textarea` Use div to replace TextArea or re-render TextArea
    - `toolbar` Override the default command element. _`toolbar`_ < _`command[].render`_
    - `preview` Custom markdown preview. [#429](https://github.com/uiwjs/react-md-editor/issues/429)
- `height?: number=200`: The height of the editor. ️⚠️ `Dragbar` is invalid when **`height`** parameter percentage.

## Html tag

<a href="https://github.com/uiwjs/react-md-editor/graphs/contributors">
  <img src="https://uiwjs.github.io/react-md-editor/CONTRIBUTORS.svg" />
</a>

<p>Some paragraph text</p>

---

Some footer text

CrispyScript

My Recent Posts