Skip to content

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.

License

Notifications You must be signed in to change notification settings

andrewvo89/mirotone-react

Repository files navigation

Status NPM Version Coverage GitHub Issues GitHub Pull Requests License


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

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.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published