Skip to content

Instantly share code, notes, and snippets.

Avatar

Anuj oyeanuj

View GitHub Profile
View Gist Personal Email Template.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Gist</title>
<style>
.personal-email {
background-color: #f9f9f9;
@zhujinxuan
zhujinxuan / parseHTML.js
Created Dec 25, 2017
A naive solution for paste html to slatejs: convert classNames to inline style and wrap everything inside a div
View parseHTML.js
import mergeStyle from "./mergeStyle/index.js";
/**
* A default parseHTML by Slate
*
* @param {String} html
* @return {Object}
*/
function slateDOMParser(html) {
if (typeof DOMParser === "undefined") {
throw new Error(
@vincentriemer
vincentriemer / react-image-objectfit-fallback.js
Last active Oct 22, 2019
Image React Component with `object-fit` Fallback
View react-image-objectfit-fallback.js
// @flow
import * as React from "react";
import getStyleProp from "desandro-get-style-property";
const supportsObjectFit = !!getStyleProp("objectFit");
type Props = React.ElementProps<"img">;
export default class Image extends React.Component<Props> {
View paste.js
import Html from 'slate-html-serializer';
// import React from 'react';
// import { FunctionTypes } from 'constants/editor/ViewModel';
// import { Nodes } from 'components/editor';
import { getEventTransfer } from 'slate-react';
import { BlockTypes } from 'constants/editor';
import { Block } from 'slate';
@vincentriemer
vincentriemer / ResizeObservable.js
Created Dec 4, 2017
React Component prototype that provides element query functionality via ResizeObserver
View ResizeObservable.js
// @flow
import * as React from "react";
import ResizeObserver from "resize-observer-polyfill";
import invariant from "invariant";
type Entry = {
+contentRect: {
+width: number,
+height: number
View CheckboxIcon.js
// @flow
import React from 'react';
import Icon from './Icon';
import type { Props } from './Icon';
export default function CheckboxIcon({
checked,
...rest
}: Props & { checked: boolean }) {
return (
View icon.js
import React from 'react';
import styled, { css } from 'styled-components';
import { Tooltip } from '../globals';
export const InlineSvg = styled.svg`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
@acdlite
acdlite / Dataloader.js
Last active Aug 15, 2018
Idea for Dataloader component
View Dataloader.js
// The `loader` prop is a Dataloader instance
// https://github.com/facebook/dataloader
class Dataloader extends React.Component {
state = {data: null, isLoaded: false};
componentWillMount() {
this.prefetchData(this.props);
}
componentWillReceiveProps(nextProps) {
if (this.props.id !== nextProps.id || this.props.loader !== nextProps.loader) {
this.setState({isLoaded: false});
@selbekk
selbekk / server.js
Created Aug 18, 2017
Super simple server side rendering with React and styled-components
View server.js
const express = require('express');
require('babel-register')({
ignore: /\/(build|node_modules|.svg)\//,
presets: ['env', 'react-app']
});
const universal = require('./universal');
const app = express();
@jorilallo
jorilallo / Flex.js
Created Aug 17, 2017
Flexbox component for React
View Flex.js
// @flow
import React from 'react';
import styled from 'styled-components';
type GlobalCssValues = 'initial' | 'inherit' | 'unset';
type WrapValue = 'nowrap' | 'wrap' | 'wrap-reverse' | GlobalCssValues;
type JustifyValue =
| 'center'
You can’t perform that action at this time.