Skip to content

Instantly share code, notes, and snippets.

View drenther's full-sized avatar
🏠
Working from home

Soumyajit Pathak drenther

🏠
Working from home
View GitHub Profile
@drenther
drenther / UserProfile.js
Last active June 25, 2018 08:12
Media queries in styled-components
/* src/components/UserProfile.js */
.
.
.
/* line 44 */
const breakPoint = '600px';
@drenther
drenther / index.global-styles.js
Last active June 25, 2018 08:14
Global styling using injectGlobal from styled-components
/* src/index.js */
.
.
.
/* line 10 - 32 */
injectGlobal`
* {
@drenther
drenther / UserProfile.extend.js
Last active June 25, 2018 08:14
extending styles in styled-components
/* src/components/UserProfile.js */
.
.
.
/* line 74 - 83 */
const Value = styled.span`
font-size: ${getFontSize('tn')};
@drenther
drenther / Loader.styled-as-function.js
Last active June 25, 2018 08:15
Usage of styled as a function
/* src/components/Loader.js */
.
.
.
/* line 6 */
const Loader = ({ className }) => (<div className={className}><Loading/></div>)
@drenther
drenther / Button.js
Last active June 25, 2018 08:16
Leveraging the power of props and css helper in styled-components
/* src/components/Button.js */
import styled, { css } from 'styled-components';
import { getFontSize, getColor } from '../utils/theme';
const Button = styled.button`
font-size: ${getFontSize('smFont')};
color: ${getColor('primary')};
background: ${getColor('light')};
@drenther
drenther / Loader.keyframes-and-pseudo-elements.js
Last active June 25, 2018 08:17
keyframes and pseudo-elements usage in styled-components
/* src/components/Loader.js */
/* line 1 - 39 */
import React from 'react';
import styled, { keyframes } from 'styled-components';
import { getColor } from '../utils/theme'
@drenther
drenther / App.js
Created June 25, 2018 17:13
Theming in styled-components
/* src/App.js */
import styled, { ThemeProvider } from 'styled-components';
.
.
.
import { getUsers } from './utils/apiCalls';
import { invertTheme, getColor } from './utils/theme';
@drenther
drenther / apiCalls.js
Created July 9, 2018 10:26
utilites/apiCalls.js for next-pwa
/* ./utilities/apiCalls.js */
import 'isomorphic-unfetch';
import { API_KEY } from './config';
const BASE_URI = 'https://api.themoviedb.org/3/movie';
const IMAGE_BASE_URI = 'https://image.tmdb.org/t/p';
const fetchWithErrorHandling = async url => {
@drenther
drenther / OfflineSupport.js
Created July 14, 2018 11:04
./components/OfflineSupport.js for next-pwa
import React, { PureComponent } from 'react';
class OfflineSupport extends PureComponent {
componentDidMount() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(() => console.log('service worker registered.'))
.catch(err => console.dir(err));
}
@drenther
drenther / next.config.js
Last active July 15, 2018 18:06
next.config.js with @zeit/next-css and next-workbox-webpack-plugin
const withCSS = require('@zeit/next-css');
const NextWorkboxPlugin = require('next-workbox-webpack-plugin');
module.exports = withCSS({
webpack(config, { isServer, buildId, dev }) {
const workboxOptions = {
clientsClaim: true,
skipWaiting: true,
globPatterns: ['.next/static/*', '.next/static/commons/*'],