React Compass

React component that renders a visual compass allowing orientation to be displayed through dynamic rotation. Try it 👉​ Demo.

How to use implement

Simply, you must execute the next command in your terminal:

npm install simple-react-compass

And then, you can added in your views like this:

import { Compass } from 'simple-react-compass';

export const App = () => {
  return (
    <div>
      <Compass value={45} />
    </div>
  );
}

Let's go ahead and see what kind of properties you can share to the component to customize as you want.

Properties

| Prop | Type | Description | Default | | ------------------- | ------- | --------------------------------------------------------------------------- | ------- | | value | number | Value in degrees for the arrow's orientation. | 0 | | displayLabel | boolean | Whether to display the degree and direction label. | false | | width | number | Width of the compass component. | null | | height | number | Height of the compass component. | null | | borderColor | string | Border color of the compass. | null | | backgroundColor | string | Background color of the compass. | null | | labelColor | string | Color of the label text. | null | | displayCompassLine| boolean | Whether to display the central vertical and horizontal lines. | true | | displayCompassTick| boolean | Whether to display the small lines between each cardinal direction. | true |

Styles

The styles for this component are defined in src/Compass.css. Make sure to import this file into your application where you use the component.

Author

Tomás Malio

License

MIT