emoji-vote

1.3.1 • Public • Published

emoji-vote


Live Demo

Emoji vote component.

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm install --save emoji-vote

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import emojiVote from 'emoji-vote'

// using CommonJS modules
var emojiVote = require('emoji-vote')

The UMD build is also available on unpkg:

<script src="//unpkg.com/emoji-vote/dist/emoji-vote.cjs.js"></script>

This exposes the emojiVote() function as a global.


Usage

<div class="emoji">
  <input type="radio" name="emojiVote" id="emojiVote_dissatisfied" value="dissatisfied">
  <label for="emojiVote_dissatisfied">不满</label>
  <input type="radio" name="emojiVote" id="emojiVote_general" value="general">
  <label for="emojiVote_general">一般</label>
  <input type="radio" name="emojiVote" id="emojiVote_satisfied" value="satisfied">
  <label for="emojiVote_satisfied">满意</label>
  <input type="radio" name="emojiVote" id="emojiVote_awesome" value="awesome">
  <label for="emojiVote_awesome">满意</label>
</div>
import emojiVote from 'emoji-vote'

emojiVote('.emoji', {
  size: 30
})

Examples & Demos

Real Example on JSFiddle ➡️

API

emoji-vote's API is organized as follows:

emojiVote(el: String|Element, options: Object)

emojiVote will account for the following properties in options:

  • emoji The emoji data array, default:

    [
      `
        <circle cx="20.5" cy="26.6" r="5"/>
        <circle cx="43.5" cy="26.6" r="5"/>
        <path d="M23 47.6c5.8-4.8 12.2-4.8 18 0 .7.6 1.3-.4.8-1.3-1.8-3.4-5.3-6.5-9.8-6.5s-8.1 3.1-9.8 6.5c-.5.9.1 1.9.8 1.3"/>
      `,
      `
        <circle cx="32" cy="45.1" r="7"/>
        <circle cx="20.2" cy="25" r="4.5"/>
        <circle cx="42.7" cy="25" r="4.5"/>
      `,
      ...
    ]
  • render The render function for create svg, default:

      function (data, size) {
        return `
          <svg class="emoji-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="font-size: ${size}px;">
            <circle class="emoji-facial" cx="32" cy="32" r="30" fill="#fff" stroke="#999" stroke-width="3" />
            <g class="emoji-facial-features" fill="#999">
              ${data}
            </g>
          </svg>
        `
      }
  • size The emoji size, default to 20px.

TODO

  • [x] custom emoji svg template.
  • [ ] custom emoji color config

Readme

Keywords

Package Sidebar

Install

npm i emoji-vote

Weekly Downloads

0

Version

1.3.1

License

none

Last publish

Collaborators

  • fireyy