### Installing react-remark via Yarn

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This snippet provides the command to install the react-remark package as a dependency in a Node.js project using the Yarn package manager. It adds the package to the project's `package.json` file.

```yarn
yarn add react-remark
```

--------------------------------

### Installing react-remark via npm

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This snippet provides the command to install the react-remark package as a dependency in a Node.js project using the npm package manager. It saves the package to the project's `package.json` file under dependencies.

```npm
npm install --save react-remark
```

--------------------------------

### Rendering Static Markdown with useRemark Hook (TSX)

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This example demonstrates rendering static markdown content using the `useRemark` hook in a React functional component. The hook returns the rendered React content and a function to set the markdown source, which is updated once after the initial render using `useEffect`.

```tsx
import React, { useEffect } from 'react';
import { useRemark } from 'react-remark';

const ExampleComponent = () => {
  const [reactContent, setMarkdownSource] = useRemark();

  useEffect(() => {
    setMarkdownSource('# markdown header');
  }, []);

  return reactContent;
};

export default ExampleComponent;
```

--------------------------------

### Rendering Static Markdown with Remark Component (TSX)

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This example demonstrates rendering static markdown content using the `<Remark>` component. The markdown source is provided directly as children to the component. This is a straightforward way to render fixed markdown within a component's render method.

```tsx
import React, { useState } from 'react';
import { Remark } from 'react-remark';

const ExampleComponent = () => (
  <Remark>{`
# header

1. ordered
2. list
`}</Remark>
);

export default ExampleComponent;
```

--------------------------------

### Rendering Dynamic Markdown with Remark Component (TSX)

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This example shows how to render dynamically changing markdown content using the `<Remark>` component. The markdown source is managed via React state and passed as children to the `<Remark>` component, which automatically updates when the state changes (e.g., from user input).

```tsx
import React, { useState } from 'react';
import { Remark } from 'react-remark';

const ExampleComponent = () => {
  const [markdownSource, setMarkdownSource] = useState('');

  return (
    <>
      <input
        type="text"
        onChange={({ currentTarget }) => setMarkdownSource(currentTarget.value)}
      />
      <Remark>{markdownSource}</Remark>
    </>
  );
};

export default ExampleComponent;
```

--------------------------------

### Rendering Dynamic Markdown with useRemark Hook (TSX)

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This example shows how to dynamically update rendered markdown using the `useRemark` hook based on user input. The `setMarkdownSource` function returned by the hook is called whenever the input field's value changes, triggering a re-render of the markdown content.

```tsx
import React from 'react';
import { useRemark } from 'react-remark';

const ExampleComponent = () => {
  const [reactContent, setMarkdownSource] = useRemark();

  return (
    <>
      <input
        type="text"
        onChange={({ currentTarget }) => setMarkdownSource(currentTarget.value)}
      />
      {reactContent}
    </>
  );
};

export default ExampleComponent;
```

--------------------------------

### Passing Options to useRemark Hook (TSX)

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This snippet demonstrates how to pass configuration options to the `useRemark` hook. Options include remark plugins (`remarkPlugins`), rehype plugins (`rehypePlugins`), and options for the transformation steps (`remarkToRehypeOptions`, `rehypeReactOptions`), allowing customization of the markdown processing pipeline.

```tsx
import React, { Fragment } from 'react';
import { useRemark } from 'react-remark';
import remarkGemoji from 'remark-gemoji';
import rehypeSlug from 'rehype-slug';
import rehypeAutoLinkHeadings from 'rehype-autolink-headings';

// ...

const [reactContent, setMarkdownSource] = useRemark({
  remarkPlugins: [remarkGemoji],
  remarkToRehypeOptions: { allowDangerousHtml: true },
  rehypePlugins: [rehypeSlug, rehypeAutoLinkHeadings],
  rehypeReactOptions: {
    components: {
      p: (props) => <p className="custom-paragraph" {...props} />,
    },
  },
});
```

--------------------------------

### Rendering Static Markdown with useRemarkSync Hook (TSX)

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This snippet illustrates using the `useRemarkSync` hook for rendering markdown content synchronously, suitable for server-side rendering (SSR). It directly returns the rendered React content from a static markdown string. Note that this hook will fail if used with asynchronous remark plugins.

```tsx
import React from 'react';
import { useRemarkSync } from 'react-remark';

const ExampleComponent = () => {
  const reactContent = useRemarkSync('# markdown header');

  return reactContent;
};

export default ExampleComponent;
```

--------------------------------

### Passing Options to Remark Component (TSX)

Source: https://github.com/remarkjs/react-remark/blob/main/readme.md

This snippet shows how to pass configuration options as props to the `<Remark>` component. Similar to the hook, options like `remarkPlugins`, `rehypePlugins`, `remarkToRehypeOptions`, and `rehypeReactOptions` can be provided to customize the markdown processing and rendering behavior, including custom React components for elements.

```tsx
import React, { Fragment } from 'react';
import { Remark } from 'react-remark';
import remarkGemoji from 'remark-gemoji';
import rehypeSlug from 'rehype-slug';
import rehypeAutoLinkHeadings from 'rehype-autolink-headings';

// ...

<Remark
  remarkPlugins={[remarkGemoji]}
  remarkToRehypeOptions={{ allowDangerousHtml: true }}
  rehypePlugins={[rehypeSlug, rehypeAutoLinkHeadings]}
  rehypeReactOptions={{
    components: {
      p: (props) => <p className="custom-paragraph" {...props} />,
    },
  }}
>
  {markdownSource}
</Remark>;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.