monolieta-shape

Create graphics using HTML SVG built with and for ReactJS

Usage no npm install needed!

<script type="module">
  import monolietaShape from 'https://cdn.skypack.dev/monolieta-shape';
</script>

README

Monolieta shape

Install

# from npm
npm install --save monolieta-shape

# from yarn
yarn add monolieta-shape

Usage

Rect

Shape - Rect

import { Rect } from 'monolieta-shape';

export default function App() {
    return (
        <svg width="500" height="500">
            <Rect x={50} y={50} width={100} height={100} />
        <svg>
    )
}

Props

background Background color
color Line color
disabled Disable line changes
edges Show edges
height The height of the rectangle
onDragEnd Subscribe to event
onDragStart Subscribe to event
onDrag Subscribe to event
onSelected Subscribe to event
opacity Opacity of the background
width The width of the rectangle
x The x-axis coordinate
y The y-axis coordinate

Point

Shape - Point

import { Point } from 'monolieta-shape';

export default function App() {
    return (
        <svg width="500" height="500">
            <Point x={50} y={50} />
        <svg>
    )
}

Props

color Line color
disabled Disable line changes
onDragEnd Subscribe to event
onDragStart Subscribe to event
onDrag Subscribe to event
x The x-axis coordinate
y The y-axis coordinate