Dmitry Olkhovoi DmitryOlkhovoi

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">

## index.tsx
import React, { FunctionComponent, ButtonHTMLAttributes, useState } from 'react';
import uuid from 'uuid/v4';
import classnames from 'classnames';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    primary?: boolean,
    accent?: boolean,
    circle?: boolean,
    ripple?: boolean,
    additionalClass?: string,

## index.tsx
function onAnimationEnd(key: string) {
        setRippleElements(rippleElements => rippleElements.filter(element => element.key !== key));
    }

## index.tsx
function onRippleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
        var rect = event.currentTarget.getBoundingClientRect();

        const d = Math.max(event.currentTarget.clientWidth, event.currentTarget.clientHeight);
        const left = event.clientX - rect.left - d/2 + 'px';
        const top = event.clientY - rect.top - d/2 + 'px';
        const rippleElement = newRippleElement(d, left, top);

        setRippleElements([...rippleElements, rippleElement]);
    }

## inde.tsx
...

    const [rippleElements, setRippleElements] = useState<JSX.Element[]>([]);

...

    function renderRippleElements() {
        return rippleElements;
    }

## css.css
.with-ripple {
        @apply relative overflow-hidden;

        @keyframes ripple {
            to {
                @apply opacity-0;
                transform: scale(2.5);
            }
        }

## index.tsx
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    primary?: boolean,
    accent?: boolean,
    additionalClass?: string,
}

...

const classNames = classnames(
        'btn',

## index.tsx
import React, { FunctionComponent } from 'react';

export interface ButtonProps {
}

const Button: FunctionComponent<ButtonProps> = (props) => {
    return (
        <button className="btn">props.children</button>
    );
}

## css.css
&:hover {
        background-color: var(--grey04);
    }

    &.accent {
        color: var(--blue01);
    }

    &.primary {
        @apply text-white;

## css.css
.btn {
    @apply text-black text-base leading-snug;
    @apply py-3 px-4 border-none rounded-lg;
    @apply inline-block cursor-pointer no-underline;

    &:focus {
        @apply outline-none;
    }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	import React, { FunctionComponent, ButtonHTMLAttributes, useState } from 'react';
	import uuid from 'uuid/v4';
	import classnames from 'classnames';

	export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
	primary?: boolean,
	accent?: boolean,
	circle?: boolean,
	ripple?: boolean,
	additionalClass?: string,
	function onAnimationEnd(key: string) {
	setRippleElements(rippleElements => rippleElements.filter(element => element.key !== key));
	}
	function onRippleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
	var rect = event.currentTarget.getBoundingClientRect();

	const d = Math.max(event.currentTarget.clientWidth, event.currentTarget.clientHeight);
	const left = event.clientX - rect.left - d/2 + 'px';
	const top = event.clientY - rect.top - d/2 + 'px';
	const rippleElement = newRippleElement(d, left, top);

	setRippleElements([...rippleElements, rippleElement]);
	}
	...

	const [rippleElements, setRippleElements] = useState<JSX.Element[]>([]);

	...

	function renderRippleElements() {
	return rippleElements;
	}
	.with-ripple {
	@apply relative overflow-hidden;

	@keyframes ripple {
	to {
	@apply opacity-0;
	transform: scale(2.5);
	}
	}
	import React, { FunctionComponent } from 'react';

	export interface ButtonProps {
	}

	const Button: FunctionComponent<ButtonProps> = (props) => {
	return (
	<button className="btn">props.children</button>
	);
	}
	&:hover {
	background-color: var(--grey04);
	}

	&.accent {
	color: var(--blue01);
	}

	&.primary {
	@apply text-white;
	.btn {
	@apply text-black text-base leading-snug;
	@apply py-3 px-4 border-none rounded-lg;
	@apply inline-block cursor-pointer no-underline;

	&:focus {
	@apply outline-none;
	}
	}