Nautical Poseidon Mythology

    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-compass package

    0.1.0 • Public • Published

    React Compass v0.1.0

    npm version Bower version Dependency Status devDependency Status peerDependency Status

    A carefully crafted Compass component for React. (Demo)

    ReactCompass component preview


    The package can be installed via:

    • Bower: bower install react-compass
    • NPM: npm install react-compass --save

    You’ll need to install React separately since this dependency isn’t included in the package. Below is a simple example on how to use the FashionCompass in a React view. You will also need to require the css file from this package (or provide your own). The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).

    import React from 'react';
    import { render } from 'react-dom';
    import Compass from 'react-Compass';
    import 'react-compass/dist/react-compass.css';
    class MyApp extends React.Component {
        // ...
        render() {
            return (
                <Compass direction={this.state.newDirection} />
    render(<MyApp />, document.getElementById('app'));


    The default Compass can be initialised by:

    <Compass direction{0} />

    You may use Device Orientation Events to update your compass direction each time the orientation was changed.

    Optionally, you may pass array of string containing direction names like next:

    <Compass directionNames={['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']}>


    We're always trying to stay compatible with the latest version of React. We can't support all older versions of React, since React is still < 1.0 and introducing breaking changes every release.

    Latest compatible versions:

    • React 0.14 or newer: All above ReactCompass v0.1.0

    Local Development

    The master branch contains the latest version of the Compass component. To start your example app, you can run npm dev-server. This starts a react-dev-server on http://localhost:8080. The server will automatically compile your changes and execute linters.

    The examples

    The examples are hosted within the example folder and are ran in the simple add that loads the Compass. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.


    MIT © Bohdan Shtepan


    npm i react-compass

    DownloadsWeekly Downloads






    Last publish


    • virtyaluk