Skip to content

Instantly share code, notes, and snippets.

View chrisdamba's full-sized avatar

Christopher Dambamuromo chrisdamba

View GitHub Profile
@ryanflorence
ryanflorence / $post.edit.tsx
Last active March 9, 2022 22:50
The Anatomy of a Remix Route
/**
* The Anatomy of a Remix Route
*/
import { parseFormBody, json, redirect } from "@remix-run/data";
import {
Form,
useRouteData,
usePendingFormSubmit,
preload,
} from "@remix-run/react";
@jaredpalmer
jaredpalmer / outline.md
Last active January 9, 2021 18:38
Formik Tutorial

Formik Tutorial Outline

We're going to build a multi-step wizard for a jobs-to-be-done customer research questionaire from scratch.

Before we start

  • Installation
  • What we're building
  • Getting help
meta
title
Mutations with Actions and Form | Remix

import { Link } from "react-router-dom";

Mutations with Actions and <Form>

Data mutations in Remix are built on top of two fundamental web APIs: `` and HTTP. We then use progressive enhancement to enable optimistic UI, loading indicators, and validation feedback--but the programming model is still built on HTML forms.

@justinwaite
justinwaite / SignInScreen.js
Created May 15, 2018 19:50
AWS Amplify - Authenticating a user via facebook using React Native and Expo (identity pool, not user pool).
import Expo from "expo";
import { Auth } from "aws-amplify";
...
class SignInScreen extends React.Component {
...
loginWithFacebook = async () => {
@msand
msand / svg-css-inliner-color-hexer-gradient-defs-grouper-number-formatter.js
Last active April 22, 2025 14:27
Convert Illustrator SVG export into cross-platform CSS independent mode. CSS rule and style inlining, group gradients into a definitions tag, remove elements with display set to none, make colors hex. Works with react-native-web react-native-svg and svgs to give cross-platform web and native mobile rendering of any SVG produced in Illustrator.
/*
Open console.
(Import https://raw.githubusercontent.com/MikeMcl/decimal.js/master/decimal.js first if you want/need number formatting)
Then copy & paste this + enter, to run this.
Copy console output to a NewFile.js or NewFile.jsx file.
prettier --write NewFile.js
*/
/* eslint no-console: ["error", { allow: ["log"] }] */
/* global document, Decimal*/
(() => {
There is no requirement that you make a one-to-one in/out ratio. So you can emit multiple actions using flatMap if you need to:
const loaded = (results) => ({type: 'RESULTS_LOADED', results});
const otherAction = (results) => ({type: 'MY_OTHER_ACTION', results});
searchEpic = (action$) =>
action$
.ofType('SEARCH')
.mergeMap(
Observable
@timoxley
timoxley / 1.rreaddir.js
Last active June 19, 2025 19:36
async/await recursive fs readdir
import { join } from 'path'
import { readdir, stat } from 'fs-promise'
async function rreaddir (dir, allFiles = []) {
const files = (await readdir(dir)).map(f => join(dir, f))
allFiles.push(...files)
await Promise.all(files.map(async f => (
(await stat(f)).isDirectory() && rreaddir(f, allFiles)
)))
return allFiles
@btroncone
btroncone / rxjs_operators_by_example.md
Last active September 14, 2025 16:48
RxJS 5 Operators By Example
@sectore
sectore / 01-createObservableFromDeviceEventEmitter.js
Last active November 26, 2023 06:42
[React Native + RxJS] Create an Observable from DeviceEventEmitter - An example to handle 'locationUpdated' event
import React, {DeviceEventEmitter} from 'react-native';
import {Observable} from 'rx-lite'
/**
* Creates an Observable to listen to any event of DeviceEventEmitter
* @param type {string} Event type
*/
export default createObservableFromDeviceEventEmitter$ = type => {
let subscription;
return Observable.fromEventPattern(
@adamloving
adamloving / react-toggle.js
Created October 22, 2015 18:47
Bootstrap button group toggle react js example
var ProjectForm = React.createClass({
getInitialState: function() {
return { headerText: 'nothing' }
},
handleToggleChange: function(value) {
this.setState({ headerText: value.toUpperCase() })
},
render: function() {
return (
<form>