https://github.com/svank/react-constellation-sketcher

React Component for drawing constellations
https://github.com/svank/react-constellation-sketcher

canvas constellation javascript react stars

Last synced: about 1 month ago
JSON representation

React Component for drawing constellations

• Host: GitHub
• URL: https://github.com/svank/react-constellation-sketcher
• Owner: svank
• License: mit
• Created: 2020-05-03T18:23:18.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T02:18:15.000Z (about 2 years ago)
• Last Synced: 2025-09-07T09:42:20.278Z (9 months ago)
• Topics: canvas, constellation, javascript, react, stars
• Language: JavaScript
• Size: 508 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-constellation-sketcher

> React Component for drawing constellations, wrapping [Constellation Sketcher](https://github.com/svank/constellation-sketcher)

[![NPM](https://img.shields.io/npm/v/react-constellation-sketcher.svg)](https://www.npmjs.com/package/react-constellation-sketcher)

[Live demo](https://samvankooten.net/constellation_sketcher)

Static screenshot:

![demo image](images/readme_screenshot.png)

## Install

```bash

npm install --save react-constellation-sketcher

```

## Usage

```jsx

import React, { Component } from 'react'

import ConstellationSketcher from 'react-constellation-sketcher'

class Example extends Component {

  render() {

    return 

  }

}

```

Every [configuration option](https://github.com/svank/constellation-sketcher#configuration) in the underlying library maps to a React prop---just remove the "set" prefix and make the first letter lowercase. The `animated` prop replaces the `setAnimated` function, `drawLines` replaces `setDrawLines`, etc. The only differences are:

 * `setCrossFade` and `setFadeIn` are broken into the props `crossFade`, `crossFadeTime`, `fadeIn`, and `fadeInTime`.

* Random selection weights are set via the `weights` prop, which should be set to an object where the keys are some or all of `all`, `popular`, `striking`, `medium`, or `small`. E.g. `weights={{'all': 0, 'striking': 1}}` will ensure only *striking* constellations are chosen, and `weights={{'medium': 0}}` will block *medium* constellations from being chosen while leaving the other categories at their default weights.

The `width` and `height` props control the size of the component (square aspect ratios are recommended), and the `style` and `className` props are passed through to the underlying `` element.

The `constellation` prop sets the constellation to be shown (or the first constellation for a slideshow). If not given, a random constellation is chosen.

The `slideshow` prop sets whether successive constellations are shown (default `false`).

---

The list of constellation names and the constellation categories are availble:

```

import ConstellationSketcher, {constellationNames, categories} from 'react-constellation-sketcher'

```