Yasuyuki Enomoto blivesta

## doorman-id.js
const element = document.querySelector('#doorman');
const doorman = new Doorman(element, { /* options */ });
doorman.start();

## doorman.html
<div data-doorman>Welcome</div>

## doorman.css
[data-doorman] {
  visibility: hidden;
}

## doorman-Install-global.html
<script src="umd/doorman.min.js"></script>
<!-- OR CDN -->
<script src="https://unpkg.com/@blivesta/doorman/umd/doorman.min.js"></script>

## svgIcon.js
import React from 'react'

class SvgIcon extends React.Component {

  static get propTypes () {
    return {
      className: React.PropTypes.string,
      iconName: React.PropTypes.string,
      viewBox: React.PropTypes.string
    }

## simple-drawer.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
	margin: 0;
	position: 0;

## chaffle-options.js
var chaffle  = new Chaffle(el, {
  lang: 'en', // default: 'en'
  // 'en' || 'ja' || 'ja-hiragana' || 'ja-katakana' || 'ua'
  speed: 20, // default: 20
  delay: 100, // default: 100
});

## chaffle-mouseover.js
// Example: mouseover

import Chaffle from 'chaffle'

const elements = document.querySelectorAll('[data-chaffle]');
Array.prototype.forEach.call(elements, function (el) {
  const chaffle = new Chaffle(el, { /* options */ });
  el.addEventListener('mouseover', function () {
    chaffle.init();
  });

## chaffle-markup.html
<p data-chaffle="en">English</p>
<p data-chaffle="ja">日本語</p>
<p data-chaffle="ja-hiragana">ひらがな</p>
<p data-chaffle="ja-katakana">カタカナ</p>
<p data-chaffle="ua">Українська</p>

## chaffle.html
<script src="YOUR-PROJECT/chaffle.min.js"></script>
<!-- CDN -->
<script src="https://npmcdn.com/chaffle/chaffle.min.js"></script>
	const element = document.querySelector('#doorman');
	const doorman = new Doorman(element, { /* options */ });
	doorman.start();
	<script src="umd/doorman.min.js"></script>
	<!-- OR CDN -->
	<script src="https://unpkg.com/@blivesta/doorman/umd/doorman.min.js"></script>
	import React from 'react'

	class SvgIcon extends React.Component {

	static get propTypes () {
	return {
	className: React.PropTypes.string,
	iconName: React.PropTypes.string,
	viewBox: React.PropTypes.string
	}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
	* {
	margin: 0;
	position: 0;
	var chaffle = new Chaffle(el, {
	lang: 'en', // default: 'en'
	// 'en' \|\| 'ja' \|\| 'ja-hiragana' \|\| 'ja-katakana' \|\| 'ua'
	speed: 20, // default: 20
	delay: 100, // default: 100
	});
	// Example: mouseover

	import Chaffle from 'chaffle'

	const elements = document.querySelectorAll('[data-chaffle]');
	Array.prototype.forEach.call(elements, function (el) {
	const chaffle = new Chaffle(el, { /* options */ });
	el.addEventListener('mouseover', function () {
	chaffle.init();
	});
	<p data-chaffle="en">English</p>
	<p data-chaffle="ja">日本語</p>
	<p data-chaffle="ja-hiragana">ひらがな</p>
	<p data-chaffle="ja-katakana">カタカナ</p>
	<p data-chaffle="ua">Українська</p>
	<script src="YOUR-PROJECT/chaffle.min.js"></script>
	<!-- CDN -->
	<script src="https://npmcdn.com/chaffle/chaffle.min.js"></script>