Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romellogoodman/react-goodgraphics
A set of components for working with SVGs in React.
https://github.com/romellogoodman/react-goodgraphics
javascript react svg
Last synced: about 17 hours ago
JSON representation
A set of components for working with SVGs in React.
- Host: GitHub
- URL: https://github.com/romellogoodman/react-goodgraphics
- Owner: romellogoodman
- License: mit
- Created: 2021-03-12T14:38:20.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-04-28T12:44:11.000Z (over 3 years ago)
- Last Synced: 2025-01-18T12:08:50.235Z (3 days ago)
- Topics: javascript, react, svg
- Homepage: https://goodgraphics.xyz
- Size: 53.7 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-goodgraphics
[](https://badge.fury.io/js/react-goodgraphics)
A set of components for working with SVGs in React. This library is a very thin wrapper over native SVG functionality. This project is part of [goodgraphics.xyz](http://goodgraphics.xyz/)
## Usage
### Install
```
npm i react-goodgraphics
```
### Use
```js
import React from "react";
import { SVG, Circle } from "react-goodgraphics";
const FooBar = () => {
return (
);
};
export default FooBar;
```
## API
NOTE: Detailed are props that we map to the native SVG markup. i.e. the `x` and `y` props on Circle get mapped to `cx` and `cy`. All valid html attributes are accepted and passed to the components.
### `SVG`
- `@prop {Number} height` Height of the svg. Defaults to 200.
- `@prop {Number} width` Width of the svg. Defaults to 200.
### `Circle`
- `@prop {String | Number} x` The x position for the shape.
- `@prop {String | Number} y` The y position for the shape.
- `@prop {String | Number} radius` The radius of the shape.
### `Ellipse`
- `@prop {String | Number} x` The x position for the shape.
- `@prop {String | Number} y` The y position for the shape.
- `@prop {String | Number} width` The width of the shape.
- `@prop {String | Number} height` The height of the shape.
### `Rect`
- `@prop {String | Number} x` The x position for the shape.
- `@prop {String | Number} y` The y position for the shape.
- `@prop {String | Number} width` The width of the shape.
- `@prop {String | Number} height` The height of the shape.
### `Square`
- `@prop {String | Number} x` The x position for the shape.
- `@prop {String | Number} y` The y position for the shape.
- `@prop {String | Number} size` The size of the square.
### `Line`
- `@prop {String | Number} x1` The x position of the start of the line.
- `@prop {String | Number} y1` The y position of the start of the line.
- `@prop {String | Number} x2` The x position of the end of the line.
- `@prop {String | Number} y2` The y position of the end of the line.
### `Times`
Runs the draw function x number of times.
- `@prop {Number} number` The number of times to run the loop.
- `@prop {Function} draw` The draw render prop function.
### `Grid`
Draw items across a grid.
- `@prop {Function} draw` The draw render prop function.
- `@prop {Number} columns` The number of columns.
- `@prop {Number} rows` The number of rows.
- `@prop {Number} height` Height of the svg. Defaults to svg's height.
- `@prop {Number} width` Width of the svg. Defaults to svg's width.
- `@prop {Number} margin` Margin between the edges and the grid. Defaults to 0.