Dev Docs

Dev Docs

  • Intro

›Frontend

General

  • Getting Started
  • Guiding Principles
  • Case for Microservice
  • Case for DDD
  • Tech Stack

Frontend

  • React Basics
  • Styled Components
  • React Hooks

Backend

  • Getting Started with Serverless
  • Serverless and GraphQL
  • Making a Service

Styled Components

Styled Components is a CSS Library for React. You start by including it at the top of your file.

import styled, { keyframes } from 'styled-components'

You then defined a React Component by defining the styles in a template string. In the example below, the styled.div will create a react component wrapper in those styles. Then we just use the Component in our jsx like a normal component without needing to define css classes or cssJsObjects. Very clean!

const Box = styled.div`
    height: 300px;
    width: 220px;
    background: red;
    &:hover {
        cursor: pointer;
    }
`

export default () => <Box />

Animations

If you want to do animations, you can do that with keyframes. You have to make sure you define your keyframe animation first before using it.

const placeHolderShimmer = keyframes`
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
`

const AnimatedBackground = styled.div`
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: ${placeHolderShimmer};
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 480px;
    position: relative;
`
← React BasicsReact Hooks →
  • Animations
Dev Docs
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Facebook Open Source
Copyright © 2020 Your Name or Your Company Name