Skip to content

Instantly share code, notes, and snippets.

View johnotu's full-sized avatar

John Otu johnotu

34 followers · 48 following
View GitHub Profile
@johnotu
johnotu / index.js
Created November 11, 2020 08:29
DigitalClock - Entry file
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App.js';
ReactDOM.render(
@johnotu
johnotu / useScript.js
Created October 17, 2020 21:59
Modified useScript hook to load in a specific environment
import { useEffect } from "react";
const useScript = (url) => {
useEffect(() => {
// ensure script is only loaded in production
if (process.env.REACT_APP_MY_ENV === "production") {
const script = document.createElement("script");
script.src = url;
script.async = true;
document.body.appendChild(script);
@johnotu
johnotu / TopNav.jsx
Created April 4, 2020 08:23
TopNav component
import React, { useState } from 'react';
import Logo from '../images/logo_512x512.png';
const TopNav = props => {
const [isNavCollapsed, setIsNavCollapsed] = useState(true);
const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
return (
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
@johnotu
johnotu / navbar-collapse-with-dynamic-class.jsx
Last active October 19, 2020 19:11
Bootstrap Navbar-collapse with dynamic collapse class
<div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
<a className="nav-link text-info" href="/contact">Support</a>
<a className="nav-link text-info" href="/login">Login</a>
<a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
</div>
@johnotu
johnotu / geo.js
Created July 31, 2019 12:51 — forked from mkhatib/geo.js
A Javascript utility function to generate number of random Geolocations around a center location and in a defined radius.
/**
* Generates number of random geolocation points given a center and a radius.
* @param {Object} center A JS object with lat and lng attributes.
* @param {number} radius Radius in meters.
* @param {number} count Number of points to generate.
* @return {array} Array of Objects with lat and lng attributes.
*/
function generateRandomPoints(center, radius, count) {
var points = [];
for (var i=0; i<count; i++) {
@johnotu
johnotu / index.css
Created May 24, 2019 12:27
CSS for index.html
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
@johnotu
johnotu / index.html
Created May 24, 2019 11:06
Basic HTML page with Bootstrap 4.0 including script tags for React and Babel
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
@johnotu
johnotu / blog-app.js
Last active May 24, 2019 09:17
Putting it all together
'use strict';
const Header = props => {
return (
<header>
<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a className="navbar-brand" href="#">My Blog</a>
</nav>
</header>
)
@johnotu
johnotu / blog-app.js
Last active May 24, 2019 09:15
Initial parent component (before we add child components)
'use strict';
class BlogApp extends React.Component {
constructor(props) {
super(props);
this.state = {
blogPost: {}
};
}
@johnotu
johnotu / handle-messages.js
Created December 7, 2018 18:51
Code Snippets - Custom Payments for Messenger
/**
* Handle messages received by bot server
*
*/
'use strict';
// Assume you have these functions defined and exported in your project folder
const sendTextMessage = require('../actions/sendTextMsg');
const sendButtonMsg = require('../actions/sendButtonMsg');