Mirotone React

Mirotone React is a component library for the Mirotone Design System, offering a range of components and utilities to speed up development for Miro. It draws inspiration from Mirotone CSS and Miro UI Components.

Documentation

For API docs and usage examples, visit the Mirotone React documentation page.

Table of contents

• Links
• Installation
• Usage
• Tokens
• Roadmap
• Versions
• License

Links

• NPM package
• GitHub repository
• Documentation
• Mirotone CSS
• Miro UI components

Installation

Install the package as a dependency on your own project by running:

npm install mirotone-react

yarn add mirotone-react

pnpm add mirotone-react

Usage

All components and types are exported from the main package. You can import them as follows:

import { Button, ButtonProps, Input, InputProps, tokens } from 'mirotone-react';
import { useCallback, useRef, useState } from 'react';

const buttonProps: ButtonProps = {
  size: 'large',
  variant: 'danger',
};

const inputProps: InputProps = {
  size: 'small',
};

function App() {
  const [value, setValue] = useState('');
  const buttonRef = useRef<HTMLButtonElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const buttonClickHandler = useCallback(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <>
      <Input
        {...inputProps}
        ref={inputRef}
        value={value}
        onChange={setValue}
        style={{ color: tokens.color.red[800] }}
      />
      <Button
        {...buttonProps}
        ref={buttonRef}
        style={{ borderRadius: tokens.borderRadius.small }}
        onClick={buttonClickHandler}
      >
        Click to focus input
      </Button>
    </>
  );
}

export default App;

Tokens

Mirotone React provides a type safe way to access the tokens from Mirotone CSS. Tokens include color, typography, space, borderRadius. All tokens are exported from the main package. You can import them as follows:

import { tokens } from 'mirotone-react';

| Token | Path | Documentation | | ------------- | --------------------- | -------------------------------------------------------------------------------------------------------- | | Color | tokens.color | Color docs | | Typography | tokens.typography | Typography docs | | Spacing | tokens.space | Spacing docs | | Border radius | tokens.borderRadius | Border radius docs |

Roadmap

| Feature | Status | Reference | | ----------------- | ------ | -------------------------------------------------------------------------------------------- | | Dismissable badge | Beta | Docs | | Dropdown | Beta | Docs | | Tooltip | Beta | Docs |

Versions

| Mirotone React | Mirotone CSS | Mirotone UI Components | | -------------- | ------------ | ---------------------- | | 1.x.x | 5.1.1 | 1.4.0 | | 2.x.x | 5.3.0 | 1.4.0 |

License

Mirotone React is distributed under MIT license, Copyright (c) 2024 Andrew Vo-Nguyen. See LICENSE for more information.