Skip to content

Instantly share code, notes, and snippets.

@kennygoff

kennygoff/PlaceholderText.js

Created June 27, 2019 17:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kennygoff/a6f18ad4ab7d79f7157dc64d1ebc8f0e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kennygoff/a6f18ad4ab7d79f7157dc64d1ebc8f0e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kennygoff created this gist Jun 27, 2019.
    28 changes: 28 additions & 0 deletions PlaceholderText.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    import React from 'react';
    import styled from '@emotion/styled';
    import { keyframes } from '@emotion/core';

    const pulse = props => keyframes`
    0% {
    background-color: ${props.theme.colors.placeholder};
    }
    70% {
    background-color: ${props.theme.colors.placeholderAccent};
    }
    100% {
    background-color: ${props.theme.colors.placeholder};
    }
    `;
    const Text = styled.span`
    &::before {
    content: "${props => '_'.repeat(props.contentWidth)}";
    background-color: ${props => props.theme.colors.placeholder};
    color: transparent;
    border-radius: 3px;
    animation: ${props => pulse(props)} 4s ease infinite;
    }
    `;

    export default Text;