How to use react-emotion - 10 common examples

function count(n = 4, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => `
      &:nth-child(${i}) {
        animation-delay: ${delay(0.2, n, i - 1)}s;
      }
  `);
  return css(list.join('\n'));
}

function count(n = 4, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => `
      &:nth-child(${i}) {
        animation: ${pulseSync} 0.6s ${delay(0.07, n, i)}s infinite ease-in-out;
      }
  `);
  return css(list.join('\n'));
}

function count(n = 6, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => `
      &:nth-child(${i}) {
        animation: ${lineScale} 1s ${delay(0.1, n, i)}s infinite cubic-bezier(.2,.68,.18,1.08);
      }
  `);
  return css(list.join('\n'));
}

render() {
		const { children, className, style } = this.props;
		return (
			<div style="{style}">
				{children}
			</div>
		);
	}
}

render() {
    const { className, children } = this.props;
    return (
      <h2>{children}</h2>
    );
  }
}

render() {
    const { className, children } = this.props;
    return (
      <div>{children}</div>
    );
  }
}

render() {
    const { className, children } = this.props;
    return (
      <h1>{children}</h1>
    );
  }
}

const TextArea = ({ className, disabled, ...rest }: Props) => (
  
);

const styles = (color, backgroundColor) =>
	css(
		backgroundColor && {
			backgroundColor,
			'&:hover, &:focus': {
				backgroundColor: shade(backgroundColor, -0.1),
				color,
			},
		},
		color && {
			color,
		},
		{
			whiteSpace: 'nowrap',
		},
	);

const styles = (color, backgroundColor) =>
	css(
		backgroundColor && {
			backgroundColor,
			'&:hover, &:focus': {
				backgroundColor: shade(backgroundColor, -0.1),
				color,
			},
		},
		color && {
			color,
		},
		{
			whiteSpace: 'nowrap',
		},
	);