How to use the gl-react.Shaders.create function in gl-react

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-dom";
import {Motion, spring} from "react-motion";

const shaders = Shaders.create({
  Heart: { // inspired from http://glslsandbox.com/e#29521.0
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D image;
uniform vec3 color;
uniform float over, toggle;
void main() {
  float scale = 1.0 - 0.1 * over - 0.8 * toggle;
  vec2 offset = vec2(0.0, -0.3 - 0.1 * over - 0.7 * toggle);
  vec2 p = scale * (2.0 * uv - 1.0 + offset);
  float a = atan(p.x, p.y) / ${Math.PI/* \o/ */};
  float r = length(p);
  float h = abs(a);
  float d = (13.0*h - 22.0*h*h + 10.0*h*h*h - 0.3 * (1.0-over))/(6.0-5.0*h);
  float f = step(r,d) * pow(max(1.0-r/d, 0.0),0.25);

//@flow
import React from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";
import timeLoop from "../../HOC/timeLoop";

const shaders = Shaders.create({
  squareTunnel: {
// from https://en.wikipedia.org/wiki/Shadertoy
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float iGlobalTime;
void main() {
  vec2 p = 2.0 * uv - vec2(1.0);
  float a = atan(p.y,p.x);
  float r = pow( pow(p.x*p.x,4.0) + pow(p.y*p.y,4.0), 1.0/8.0 );
  vec2 uv = vec2( 1.0/r + 0.2*iGlobalTime, a );
  float f = cos(12.0*uv.x)*cos(6.0*uv.y);
  vec3 col = 0.5 + 0.5*sin( 3.1416*f + vec3(0.0,0.5,1.0) );
  col = col*r;
  gl_FragColor = vec4( col, 1.0 );
}` }

}
    };
    handle = raf(loop);

    return () => raf.cancel(handle);
  }, [onFrame]);

  return (
    
      <video>
    </video>
  );
};

// Our example will simply split R G B channels of the video.
const shaders = Shaders.create({
  SplitColor: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D children;
void main () {
  float y = uv.y * 3.0;
  vec4 c = texture2D(children, vec2(uv.x, mod(y, 1.0)));
  gl_FragColor = vec4(
    c.r * step(2.0, y) * step(y, 3.0),
    c.g * step(1.0, y) * step(y, 2.0),
    c.b * step(0.0, y) * step(y, 1.0),
    1.0);
}`
  }
  //^NB perf: in fragment shader paradigm, we want to avoid code branch (if / for)

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL } from "gl-react";
import { Surface } from "gl-react-native";
const shaders = Shaders.create({
  ColoredDisc: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform vec3 fromColor, toColor;
void main() {
  float d = 2.0 * distance(uv, vec2(0.5));
  gl_FragColor = mix(
    vec4(mix(fromColor, toColor, d), 1.0),
    vec4(0.0),
    step(1.0, d)
  );
}` }
});

class ColoredDisc extends Component {

//@flow
import React, { Component } from "react";
import { Shaders, Node, Bus, GLSL } from "gl-react";
import { Surface } from "gl-react-expo";
import {BlurV} from "../blurmap";
import timeLoop from "../../HOC/timeLoop";

const shaders = Shaders.create({
  ConicalGradiant: {
    frag: GLSL`precision highp float;
varying vec2 uv;
uniform float phase;
const float PI = 3.14159;
void main () {
  gl_FragColor = vec4(vec3(
    mod(phase + atan(uv.x-0.5, uv.y-0.5)/(2.0*PI), 1.0)
  ), 1.0);
}` }
});

const ConicalGradiantLoop = timeLoop(({ time }) =>

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL, connectSize } from "gl-react";
import { Surface } from "../../gl-react-implementation";

const shaders = Shaders.create({
  blurV1D: {
    frag: GLSL`precision highp float;
varying vec2 uv;
uniform sampler2D t, map;
uniform vec2 direction, resolution;
vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
  vec4 color = vec4(0.0);
  vec2 off1 = vec2(1.3846153846) * direction;
  vec2 off2 = vec2(3.2307692308) * direction;
  color += texture2D(image, uv) * 0.2270270270;
  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
  return color;
}

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL, Bus, Uniform } from "gl-react";
import { Surface } from "gl-react-dom";
import gameBuild from "./build";

/**
 * This example reproduce the after effects made in a js13k game:
 * https://github.com/gre/behind-asteroids
 * see also https://github.com/gre/behind-asteroids/blob/master/src/effects.js
 */

const shaders = Shaders.create({
  blur1d: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D t;
uniform vec2 dim;
uniform vec2 dir;
void main() {
  vec4 color = vec4(0.0);
  vec2 off1 = vec2(1.3846153846) * dir;
  vec2 off2 = vec2(3.2307692308) * dir;
  color += texture2D(t, uv) * 0.2270270270;
  color += texture2D(t, uv + (off1 / dim)) * 0.3162162162;
  color += texture2D(t, uv - (off1 / dim)) * 0.3162162162;
  color += texture2D(t, uv + (off2 / dim)) * 0.0702702703;
  color += texture2D(t, uv - (off2 / dim)) * 0.0702702703;

//@flow
import {
  Shaders,
  Node,
  GLSL,
  connectSize,
  LinearCopy,
  Uniform
} from "gl-react";
import React, { Component } from "react";

const shaders = Shaders.create({
  contain: {
    vert: GLSL`
attribute vec2 _p;
varying vec2 uv;
uniform float tR;
uniform vec2 res;
float r;
void main() {
  r = res.x / res.y;
  gl_Position = vec4(_p,0.0,1.0);
  uv = .5+.5*_p*vec2(max(r/tR,1.),max(tR/r,1.));
}
    `,
    frag: GLSL`
precision highp float;
varying vec2 uv;

/**
 * This celullar automaton is extracted from a game I wrote in 2014 for JS13K:
 * https://github.com/gre/ibex
 *
 * Technical article: http://greweb.me/2014/09/ibex-cellular-automata/
 */

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL, Backbuffer } from "gl-react";
import { Surface } from "gl-react-native";
import ndarray from "ndarray";
import timeLoop from "../../HOC/timeLoop";

const shaders = Shaders.create({
  IBEXRender: {
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform vec2 size;
uniform sampler2D state;
uniform vec3 CL[9];

float rand(vec2 co){
  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
vec3 colorFor (int e) {
  if(e==0) return CL[0];
  if(e==1) return CL[1];
  if(e==2) return CL[2];
  if(e==3) return CL[3];

//@flow
import React, { Component } from "react";
import { Shaders, Node, GLSL, connectSize } from "gl-react";
import { Surface } from "gl-react-dom";
import { directionForPass } from "../blurmulti";
import StaticBlurMap from "../../toolbox/StaticBlurMap";

const shaders = Shaders.create({
  blurV1D: {
    frag: GLSL`precision highp float;
varying vec2 uv;
uniform sampler2D t, map;
uniform vec2 direction, resolution;
vec4 blur9(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
  vec4 color = vec4(0.0);
  vec2 off1 = vec2(1.3846153846) * direction;
  vec2 off2 = vec2(3.2307692308) * direction;
  color += texture2D(image, uv) * 0.2270270270;
  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
  return color;
}