Skip to content

Instantly share code, notes, and snippets.

Avatar

Kevin Newman CaptainN

View GitHub Profile
@CaptainN
CaptainN / App.js
Created Jun 17, 2020
React Native Example App.js
View App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList, Image } from 'react-native';
import { AsyncStorage } from 'react-native';
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
@CaptainN
CaptainN / App.js
Last active Jun 10, 2020
React Native Workshop
View App.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, CheckBox } from 'react-native';
/**
* A computer language has 3 main parts:
* 1. Syntax
* 2. A Static environment
* 3. A Dynamic environment
*
* The syntax the format of the input. The struction of the
@CaptainN
CaptainN / App.js
Created Jun 10, 2020
React Native Workshop
View App.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, CheckBox } from 'react-native';
/**
* A computer language has 3 main parts:
* 1. Syntax
* 2. A Static environment
* 3. A Dynamic environment
*
* The syntax the format of the input. The struction of the
@CaptainN
CaptainN / Meteor Hooks Kitchen Sink.jsx
Last active Jan 1, 2021
Meteor Hooks Kitchen Sink
View Meteor Hooks Kitchen Sink.jsx
import { useTracker } from 'meteor/react-meteor-data'
// Create a reusable subscribe hook
const usePageSubscription = (pageId) => useTracker(() => {
const subscription = Meteor.subscribe('page', pageId)
return !subscription.ready()
}, [pageId])
// Separate page hook
const usePage = (pageId) => useTracker(() => {
@CaptainN
CaptainN / Meteor Containers from Hooks.jsx
Last active Jan 28, 2020
Meteor Containers from Hooks
View Meteor Containers from Hooks.jsx
import { useTracker } from 'meteor/react-meteor-data'
// We can easily make old style HOCs out of the hooks
const withUser = (Component) => (props) => {
const accountProps = useAccount()
return <Component {...props} {...accountProps} />
}
const withPage = (Component) => (props) => (
const pageProps = usePage(props.pageId)
return <Component {...props} {...pageProps} />
View Meteor Prefab Hook.jsx
import { useTracker } from 'meteor/react-meteor-data'
// Create a reusable hook
const usePage = (pageId) => useTracker(() => {
// The publication must also be secure
const subscription = Meteor.subscribe('page', pageId)
const page = Pages.findOne({ _id: pageId })
return {
page,
isLoading: !subscription.ready()
@CaptainN
CaptainN / Meteor Basic useTracker.jsx
Last active Sep 2, 2021
Meteor Basic useTracker
View Meteor Basic useTracker.jsx
import { useTracker } from 'meteor/react-meteor-data'
// Hook, basic use, everything in one component
const MyPage = (pageId) => {
const { user, isLoggedIn, page } = useTracker(() => {
// The publication must also be secure
const subscription = Meteor.subscribe('page', pageId)
const page = Pages.findOne({ _id: pageId })
return {
page,
View Meteor Containers.jsx
import { withTracker } from 'meteor/react-meteor-data'
// Create a reusable hook
const withAccount = withTracker((props) => {
const user = Meteor.user()
const userId = Meteor.userId()
return {
user,
userId,
isLoggedIn: !!userId
@CaptainN
CaptainN / Meteor Robust Prefab Hooks.jsx
Last active Jan 31, 2020
Meteor Robust Prefab Hooks
View Meteor Robust Prefab Hooks.jsx
import { useTracker } from 'meteor/react-meteor-data'
// Create a reusable hook
const useAccount = () => useTracker(() => {
const user = Meteor.user()
const userId = Meteor.userId()
return {
user,
userId,
isLoggedIn: !!userId
@CaptainN
CaptainN / Meteor Robust useTracker.jsx
Last active Mar 12, 2020
Meteor Robust useTracker
View Meteor Robust useTracker.jsx
import { useTracker } from 'meteor/react-meteor-data'
// Hook, basic use, everything in one component
const MyProtectedPage = (pageId) => {
const { user, isLoggedIn, page } = useTracker(() => {
// The publication must also be secure
const subscription = Meteor.subscribe('page', pageId)
const page = Pages.findOne({ _id: pageId })
const user = Meteor.user()
const userId = Meteor.userId()