◐ Shell
clean mode source ↗

GitHub - helpusersvote/modules: Simple libraries to help your users vote

Help Users Vote makes it easy for companies to help their users vote.

This is our monorepo of npm modules to use in your application:

Framework-specific Components

Native JavaScript Functions

Usage

If you want to add a banner to your React app, install the library:

npm i -S @helpusersvote/react

Then in your application code:

import { Banner } from '@helpusersvote/react'
import Home from '../components/home'

const HomePage = props => (
  <Home>
    <Banner ctaColor="red">
  </Home>
)

export default HomePage

Polling Place Finder in HTML

Adding the polling place finder to your website is as simple as dropping in our <script> tag and adding your Google Civic Information and Maps API keys:

<html>
<body>
  <!-- Help Users Vote - Polling Place Finder -->
  <script>
    window.CIVIC_INFO_API_KEY = 'REPLACE_WITH_CIVIC_API_KEY'
    window.GMAPS_API_KEY = 'REPLACE_WITH_GMAPS_API_KEY'
  </script>
  <script src="https://js-cdn.helpusersvote.net/polling-place-finder.js"  defer async></script>
  <div id="huv-root" />
</body>
</html>

Polling Place Finder in React

You can easily add the polling place finder into your React app by importing the component and passing in the necessary API keys:

import { PollingPlaceFinder } from '@helpusersvote/react'
import Home from '../components/home'

const apiKeys = {
  CIVIC_INFO_API_KEY: '',
  GMAPS_API_KEY: '',
  // If you're on Google Maps Premium Plan
  GMAPS_API_SIGNATURE_SECRET: ''
}

// namespaceId = partner id for your team
// id = lookup key for call-to-action, e.g. where it's rendered
const HomePage = props => (
  <Home>
    <PollingPlaceFinder apiKeys={apiKeys}>
  </Home>
)

export default HomePage

We don't set any cookies on these requests — this is a configuration CDN to check if a banner versus a popup should be rendered or if the link should be purple versus pink.

License

All modules are open-sourced under the MIT License