Skip to content

Instantly share code, notes, and snippets.

import React from 'react';
import { makeSharedStateHook } from 'make-shared-state-hook';
// Pass in an initial value and you'll get back a function that can be called
// from a component's render method to return the current value and a setter
// function, just like useState!
// You have to pass React as a parameter to avoid React version conflicts
export const useCounter = makeSharedStateHook(React, 0);
export const useLoggedInUser = makeSharedStateHook(React, '');
import React from 'react';
import { useCounter, useLoggedInUser } from './sharedState';
const CounterIncrementer = () => {
// This looks like useState, but it's shared. So whenever any other component
// calls setCounter, the counter value here will update. And calling
// setCounter here will update any other component using it.
const [counter, setCounter] = useCounter();
return (
<div>
import React from 'react';
import globalHook from 'use-global-hook';
// You'd probably want to put this and useCounter in a separate file, and only
// export useCounter
const globalCounterActions = {
setValue: (store, newValue) => {
store.setState({ value: newValue });
},
};
import React, { useState, useContext, createContext } from 'react';
// We have to define a context object for each unique piece of shared state.
// Parameter is the default value - in our case we're making it an object
// with a value, and a function to set that value. The Provider will
// populate the function
const CounterContext = createContext({
value: 0,
setValue: () => {},
});
@brentsowers1
brentsowers1 / reactPropDrilling.js
Last active January 21, 2021 22:57
React prop drilling
import React, { useState } from 'react';
const ReactPropDrilling = () => {
const [counter, setCounter] = useState(0);
return (
<div>
Main app container:
<CounterDisplay counter={counter} />
<div>
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label,react/button-has-type */}
@brentsowers1
brentsowers1 / application_helper.rb
Created March 6, 2014 03:00
application_helper
module ApplicationHelper
def inner_helper
str = content_tag(:p, "inside p content tag")
str << "a space should be between the following words: hello"
str << "&nbsp;"
str << "world"
str << "more <span style=\"font-weight:bold;\">dirty HTML</span>"
str << content_tag(:div, "inside div content tag")
end
@brentsowers1
brentsowers1 / session_store.rb
Created March 6, 2014 02:59
config/initializers/session_store.rb
# Be sure to restart your server when you modify this file.
# Your secret key for verifying cookie session data integrity.
# If you change this key, all old sessions will become invalid!
# Make sure the secret is at least 30 characters and all random,
# no regular words or you'll be exposed to dictionary attacks.
ActionController::Base.session = {
:key => '_<%= app_name %>_session',
:secret => '<%= app_secret %>'
}
@brentsowers1
brentsowers1 / ParseGithub.scala
Created March 6, 2014 02:48
Parsing Github data in to case classes
// Don't or modify remove this, it's needed by the Lift JSON library
implicit val formats = net.liftweb.json.DefaultFormats
val rspJson = parse(rspStr)
// Github response is an array of objects, this will get that array
// as a List
val rspList = rspJVal.children
val rspRepos = for (repoJObj <- rspList) yield repoJObj.extract[Repo]
@brentsowers1
brentsowers1 / GithubRepo.scala
Created March 6, 2014 02:47
Github Repo case class
/**
* A github user
*/
case class User(login: String, // login name of hte user
id: Int, // numeric github ID
avatar_url: String, // URL to their avatar pic
url: String) // API url to retrieve JSON of the user
/**
* A single code repo.
@brentsowers1
brentsowers1 / DispatchRequest.scala
Created March 6, 2014 02:46
Making an HTTP Request with Dispatch
import dispatch._
import net.liftweb.json._
val h = new Http
val req = url("https://api.github.com/users/brentsowers1/repos")
// Gets both the headers and response body
val rspStr = h(req >:+ { (headers, req) =>
val hdrs = headers
req as_str