Skip to content

Instantly share code, notes, and snippets.

View fdecampredon's full-sized avatar

François de Campredon fdecampredon

  • Fadio IT
  • Marseille
View GitHub Profile
@fdecampredon
fdecampredon / preloadServerQuery.ts
Created December 28, 2022 13:26
Relay and next 13
import { graphql } from 'graphql';
import schema from './your_schema_path';
import type { VariablesOf, GraphQLTaggedNode } from 'react-relay';
import type {
ConcreteRequest,
PayloadData,
OperationType,
} from 'relay-runtime';
export type ServerQuery<TQuery extends OperationType> = {
@fdecampredon
fdecampredon / FormScrollView.js
Created January 13, 2017 18:19
InputAccessoryView hack
import React, { PureComponent, PropTypes } from 'react';
import {
TouchableWithoutFeedback,
ScrollView,
View,
TextInput,
Keyboard,
findNodeHandle,
UIManager,
@fdecampredon
fdecampredon / index.ios.js
Created December 20, 2016 10:07
React-router + NavigationExperimental
import React, { PropTypes } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigationExperimental,
} from 'react-native';
import { MemoryRouter as Router } from 'react-router';
import { Stack, StackMatch, Link } from './stack';
@fdecampredon
fdecampredon / sineBezier.js
Last active July 1, 2016 18:34
Make bezier curve look alike sine
function quadraticBezier(t, p0, p1, p2) {
const x = (1 - t) * (1 - t) * p0.x + 2 * (1 - t) * t * p1.x + t * t * p2.x;
const y = (1 - t) * (1 - t) * p0.y + 2 * (1 - t) * t * p1.y + t * t * p2.y;
return { x, y };
}
const computeMiddle = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => ({
x: (x1 + x2) / 2,
y: (y1 + y2) / 2,
@fdecampredon
fdecampredon / vstyle-component.js
Created June 13, 2016 16:15
Vstyle Component
import React from 'react';
import ReactDOM from 'react-dom';
import { StyleSheet, createStylesRenderer } from 'vstyle';
import { StylesRendererProvider, withRenderStyles } from 'react-vstyle';
function createComponent({ component = 'div', ...styles }) {
const styleSheetDef = {
baseRule: {},
};
@fdecampredon
fdecampredon / partial-server-side.js
Last active April 22, 2022 07:48
Partial server side rendering with react
import React, { Component, PropTypes } from 'react';
import { Route, IndexRoute, Link } from 'react-router';
const styles = {
app: {
display: 'flex',
justifyContent: 'center',
},
sideBar: {
marginRight: 10,
'use strict';
var Rx = require('rx');
var React = require('react');
var React = require('react');
var Component = require('./Component');
var utils = require('./utils');
var inherits = utils.inherits;
var isObservable = utils.isObservable;
var flatten = utils.flatten;
@fdecampredon
fdecampredon / Container.js
Last active August 27, 2017 17:04
redux-relay
import React from 'react';
import { container } from 'redux-relay';
@container({
variablesFromState: (state) => ({myVariable: state.myState})
fragments: {
Relay.QL`
viewer {
@fdecampredon
fdecampredon / Contract.ts
Last active August 10, 2019 22:03
Contract programming with typescript and decorators
@In((a: string, b: string) => {
assert(typeof a === 'string');
assert(typeof b === 'string');
assert(a.length > 5);
assert(a.length > 7);
})
@Out((result: string) => {
assert(typeof result === 'string');
assert(a.length > 12);
})
@fdecampredon
fdecampredon / gist:8b5f537bacb6e2bda99b
Last active August 29, 2015 14:15
Going beyond rx-react
import {FuncSubject} from 'rx-react';
import {Observable} from 'rx';
/**
* Component are just expressed with single function that return an
* RxReact Component instance, instead of taking the props object
* as argument, they take an observable of props.
*
* By default *shouldComponentUpdate* is the one from PureRenderMixin
*/