mfrancois3k’s gists

mfrancois3k / Double quotes" + dynamic_URL_via_var combo

Created April 18, 2023 23:15

React Dynamic image componet #React

	export const countryData = {
	'sl': { name: 'Sri Lanka', flag: '/flag-of-Sri-Lanka.png' },
	'uk': { name: 'UK', flag: '/flag-of-United-Kingdom.png' },
	'usa': { name: 'USA', flag: '/flag-of-United-States-of-America.png' },
	'ca': { name: 'Canada', flag: '/flag-of-Canada.png' },
	'It': { name: 'Italy', flag: '/flag-of-Italy.png' },
	'aus': { name: 'Australia', flag: '/flag-of-Australia.png' },
	'me': { name: 'Middle East', flag: '/flag-of-Middle-East.png' },
	'other': { name: 'Other', flag: '/flag-of-World.png' }, };
	"part of URL within Double quotes" + dynamic_URL_via_var combo worked for me.

mfrancois3k / React timer Modal DailyReward.jsx

Last active April 18, 2023 22:06 — forked from KristofferTolboll2/DailyReward.jsx

React timer Modal

mfrancois3k / css

Created April 7, 2023 04:55

untitled #awwwards #CSS #effects

mfrancois3k / Gsap Hook ScrambleText.jsx

Created April 7, 2023 03:15 — forked from TylerBarnes/ScrambleText.jsx

GSAP ScrambleTextPlugin in React with Hooks

	import React, { useRef, useEffect } from "react";
	import TweenLite from "gsap";
	import "../../libs/gsap/ScrambleTextPlugin";

	export default ({ children }) => {
	if (typeof window === "undefined") return children;

	const text = useRef(null);

	useEffect(() => {

mfrancois3k / Fonts setup custom

Last active April 6, 2023 02:36

Fonts setup custom #setup


	got to this site to conver it to woff

	https://transfonter.org/

	once is converted grab all the from the zip

	The modified code snippet should look like this: put the font in the public directory

mfrancois3k / text loading circle

Created April 6, 2023 01:36

text loading circle #CSS #effects

mfrancois3k / card hover awwards

Last active April 6, 2023 01:32

Card Hover Effect Overlay CSS awwards #CSS #effects #awwwards

	refence from this tutorial

	https://www.youtube.com/watch?v=-ISvtF4wUrs&loop=0

	// concept
	-----------------------
	<div class="container"> <!-- Main container -->
	<div class="nav"> <!-- Navigation bar -->
	<div class="nav-item">logo</div>
	<div class="nav-item">art gallery</div>

mfrancois3k / plopfile.js

Created March 31, 2023 03:06 — forked from mritzco/plopfile.js

Custom action for plop. Appends data to JSON files

	const fs = require('fs-extra');
	const methods = {}, priv = {};
	// Private methods to do string replacement. Not optimized and cummulative trying to keep it simple.
	// far better options here: https://stackoverflow.com/questions/5069464/replace-multiple-strings-at-once
	priv.replaceObj = function(value, vars) {
	let obj = value;
	Object.keys(obj).forEach(function(item) {
	obj[item] = priv.replaceStr(obj[item], vars);
	});
	return obj;

mfrancois3k / Image

Last active March 22, 2023 02:37

image background

images here

mfrancois3k / Context Maaterial Ui withContext.js

Last active March 16, 2023 05:50 — forked from idoo/withContext.js

Context Material ui

 /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */
 import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
 import emptyFunction from '../../node_modules/react/lib/emptyFunction';
 import mui from 'material-ui';
 function withContext(ComposedComponent) {
   return class WithContext {
     static propTypes = {

	import _ as moment from 'moment';


	export default function DailyReward(prosp) {

	const [isShowModal, setIsShowModal] = useState<boolean>(false);
	const [isRewardAvailible, setIsRewardAailible = useState<boolean>(false);
	const [timeLeft, setTimeLeft] = useState(0) //in miliseconds
	const [reward, setReward] = useState()
	useEffect(() =>{