react-math-blocks

Live Demo & Full Customization available at PrintNum.com.

Lightweight open-source React components for Number Blocks and Ten-Frame visuals.

Install

npm install react-math-blocks

Quick Start

import { MathBlocks, TenFrame } from "react-math-blocks";

export default function Demo() {
  return (
    <div style={{ display: "grid", gap: 24 }}>
      <MathBlocks value={12} layout="array" colorStyle="Rainbow" showCountingDots />
      <TenFrame value={17} colorStyle="Pastel" showCountingDots />
    </div>
  );
}

API

MathBlocks

Props:

• value: number (1 to 100)
• layout: "auto" | "stack" | "grid" | "ten-frame" | "array"
• colorStyle: "Rainbow" | "Single Color" | "Warm" | "Cool" | "Pastel" | "B&W (Coloring)"
• face: "Happy" | "Smile" | "Surprised" | "Thinking"
• showNumberLabel: boolean
• showCountingDots: boolean
• size: number (pixel output size)
• className: string
• title: string

TenFrame

Convenience wrapper with layout fixed to ten-frame.

Development

npm run typecheck
npm run build

Publishing

npm login
npm run build
npm publish --access public

License

MIT