Block Components

Million.js introduces the concept of a "Block" component. Blocks are a way for components to be rendered using the Million.js virtual DOM.

💡

Block components must be stateless, hook-free, and only accept primitives as props.

`block()`

Syntax: block((props) => vnode)
Example: block((props) => <div>{props.foo}</div>)

block() must consume a stateless component with props containing primitives only and returns a Block component.

import { createRoot } from 'react-dom/client';
import { block } from 'million/react';
 
function Component(props) {
  return <div>Hello {props.text}</div>;
}
 
const ComponentBlock = block(Component);
 
createRoot(document.getElementById('root')).render(
  <ComponentBlock text="world" />,
);

Here's some thing's that are not allowed:

import { createRoot } from 'react-dom/client';
import { block } from 'million/react';
 
function IllegalComponent(props) {
  const [count, setCount] = useState(0); // ❌ Don't use hooks
  const bad = props.text + " don't do this"; // ❌ don't interpolate props
 
  return <div>Hello {bad}</div>;
}
 
const IllegalComponentBlock = block(IllegalComponent);
 
createRoot(document.getElementById('root')).render(
  // ❌ don't pass nonprimitives
  <IllegalComponentBlock text={{ object: 'X' }} />,
);

`<Block />`

Syntax: <Block {...props}>{(props) => vnode}</Block>
Example: <Block text="world">{(props) => <div>Hello {props.text}</div>}</Block>

<Block /> must consume a stateless component with props containing primitives only in its children and renders a block.

import { createRoot } from 'react-dom/client';
import { Block } from 'million/react';
 
createRoot(document.getElementById('root')).render(
  <Block text="World">{(props) => <div>Hello {props.text}</div>}</Block>,
);

Quickstart Block Lists