Passing Props in MDX

Props are how you send data into your components. Think of them like function arguments — you stick key-value pairs on a component tag, and the component uses them however it wants.

What Are Props?

Props flow one way: parent → child. In MDX, you write them on component tags just like HTML attributes, except you've got full JavaScript at your disposal:

The component receives these as a single object:

Passing Different Data Types

Strings

Strings are the simplest — just use quotes, no curly braces:

Numbers

Numbers need curly braces because they're JavaScript values, not strings:

Booleans

Booleans have a nice shorthand — just naming the prop means true:

Objects

Objects get double braces — the outer pair is the JSX expression wrapper, the inner pair is the object literal:

Arrays

Same curly brace pattern as objects:

Functions

You can pass event handlers, callbacks, render functions — anything callable:

Default Props

Defaults give your component sensible fallback values when a prop isn't passed:

Default Props with defaultProps (Legacy Pattern)

Note: The defaultProps pattern is being deprecated. Use default parameter values in the function signature instead.

The Children Prop

children is whatever you put between the opening and closing tags of a component:

Multiple Children Slots

When you need more than one content area, use named props:

Spread Props

The spread operator (...) dumps all properties of an object as individual props:

Combining Spread with Individual Props

Note: Later props override earlier ones. In the example above, className from the spread gets overridden by the explicit className.

Destructuring Props

Destructuring pulls out specific props right in the function signature. It's cleaner and gives you defaults in one place:

The ...rest pattern captures everything you didn't explicitly name. Super handy for passing through DOM attributes like id or data-*.

TypeScript Props Interfaces

TypeScript catches prop mistakes at compile time instead of at 2am in production:

Usage in MDX:

Practical Tips

<div className="tips">

Tip 1: Keep prop interfaces simple in MDX files. Complex data should live in separate data files, not inline.

Tip 2: Use descriptive prop names. <Card color="red"> is way better than <Card c="r">.

Tip 3: Prefer primitive props (strings, numbers, booleans) for simple components. Save object props for complex configs.

Tip 4: Don't pass props the component doesn't need. Every prop is a contract.

</div>

Common Pitfalls

1. Forgetting curly braces for non-string values — count="5" passes a string, count={5} passes a number
2. Mutating props — Props are read-only. Never modify them inside a component
3. Passing objects inline in render — style={{ color: 'red' }} creates a new object every render; extract it if performance matters
4. Missing required props — Use TypeScript or PropTypes to catch this early
5. Over-spreading — {...props} on DOM elements can pass invalid HTML attributes and trigger warnings

Summary

Props are how your MDX content talks to React components. Once you're comfortable with the different data types, defaults, children, spread, and TypeScript interfaces, you can build flexible component libraries that make your MDX content way more powerful.