Skip to main content

Congratulations! (Examples In Line)

Examples​

Open​

Why is it called swizzling?

The name comes from Objective-C and Swift-UI: method swizzling is the process of changing the implementation of an existing selector (method).

For Docusaurus, component swizzling means providing an alternative component that takes precedence over the component provided by the theme.

You can think of it as Monkey Patching for React components, enabling you to override the default implementation. Gatsby has a similar concept called theme shadowing.

To gain a deeper understanding of this, you have to understand how theme components are resolved.

Boxes​

tip

Tags can also be declared with tags: [Demo, Getting started].

Read more about all the possible Yaml array syntaxes.

info

Tags can also be declared with tags: [Demo, Getting started].

Read more about all the possible Yaml array syntaxes.

note

Tags can also be declared with tags: [Demo, Getting started].

Read more about all the possible Yaml array syntaxes.

caution

Tags can also be declared with tags: [Demo, Getting started].

Read more about all the possible Yaml array syntaxes.

PREFER STAYING ON THE SAFE SIDE

Tags can also be declared with tags: [Demo, Getting started].

Read more about all the possible Yaml array syntaxes.

Source code​

Swizzle it manually by creating a file at src/theme/Root.js:

src/theme/Root.js
import React from 'react';

// Default implementation, that you can customize
export default function Root({children}) {
  return <>{children}</>;
}

You have just learned the basics of Docusaurus and made some changes to the initial template.

Docusaurus has much more to offer!

Have 5 more minutes? Take a look at versioning and i18n.

Anything unclear or buggy in this tutorial? Please report it!

What's next?​