Skip to content

Instantly share code, notes, and snippets.

View oyeanuj's full-sized avatar

Anuj oyeanuj

View GitHub Profile
import React from 'react'
import Portal from 'react-portal'
class LinkBlock extends React.Component {
constructor (props) {
super(props)
this.state = {
href: this.props.node.data.get('href'),
showingPopup: false,
popup: null,
@sineed
sineed / ams.rb
Last active June 10, 2020 15:42
Upgrade AMS from 0.9.0 to 0.10.0
module AMS
module V09
class Serializer < ActiveModel::Serializer
def serializable_hash(adapter_options = nil,
options = {},
adapter_instance = self.class.serialization_adapter_instance)
object.nil? ? nil : super
end
end
@ianstormtaylor
ianstormtaylor / slate-node-portal.js
Created September 13, 2016 18:21
A React component example that makes it simple to position an element relative to a Slate node.
import React from 'react'
import Portal from 'react-portal'
import getOffsets from 'positions'
import { findDOMNode } from 'slate'
/**
* No-op.
*
* @type {Function}
@bvaughn
bvaughn / react-lifecycle-cheatsheet.md
Last active March 2, 2023 13:29
React lifecycle cheatsheet

React lifecycle cheatsheet

Method Side effects1 State updates2 Example uses
Mounting
componentWillMount Constructor equivalent for createClass
render Create and return element(s)
componentDidMount DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps Update state based on changed props
import { Plugin } from 'uppy';
export default class ReduxEmitter extends Plugin {
constructor(core, opts) {
super(core, opts);
this.type = 'redux';
this.id = 'ReduxEmitter';
this.title = 'Redux Emitter';
// set default options
const defaultOptions = {};
class MyEditor {
onPaste = (_event, paste, state) => {
if (paste.type === "text" && isUrl(paste.text) && state.isCollapsed) {
return (
state
.transform()
.insertText(paste.text)
.extend(0 - paste.text.length)
.wrapInline({
type: "link",
@designspin
designspin / server-middleware-reactapplication-index.js
Created July 13, 2017 21:38
Styled-Components with React Universally
import React from 'react';
import Helmet from 'react-helmet';
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { AsyncComponentProvider, createAsyncContext } from 'react-async-component';
import asyncBootstrapper from 'react-async-bootstrapper';
import config from '../../../config';
import ServerHTML from './ServerHTML';
@jorilallo
jorilallo / Flex.js
Created August 17, 2017 20:06
Flexbox component for React
// @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'
@selbekk
selbekk / server.js
Created August 18, 2017 12:39
Super simple server side rendering with React and styled-components
const express = require('express');
require('babel-register')({
ignore: /\/(build|node_modules|.svg)\//,
presets: ['env', 'react-app']
});
const universal = require('./universal');
const app = express();
@acdlite
acdlite / Dataloader.js
Last active August 15, 2018 04:36
Idea for Dataloader component
// 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});