Skip to content

Instantly share code, notes, and snippets.

View Evavic44's full-sized avatar
Always learning

Victor Eke Evavic44

Always learning
View GitHub Profile
@Evavic44
Evavic44 / useOnlineStatus.tsx
Created February 19, 2024 19:56
State hook for detecting online status
// Custom hook
import { useState, useEffect } from "react";
export function useOnlineStatus() {
const [isOnline, setIsOnline] = useState<boolean>(true);
useEffect(() => {
function handleOnline() {
setIsOnline(true);
}
@Evavic44
Evavic44 / Slider.md
Last active December 25, 2023 15:59
Before and after slider component

Slider Toggle Button

import { FormEvent } from "react";
import styles from "./ToggleButton.module.css";

type ToggleProps = {
  onToggle: (isChecked: boolean) => void;
};

export default function ToggleButton({ onToggle }: ToggleProps) {
@Evavic44
Evavic44 / dynamic-icon-react.md
Last active July 11, 2023 03:56
Snippet on how to dynamically import icons based on a string in React

First install the iconify library or follow this [guide][iconify]

npm install --save-dev @iconify/react

// using yarn
yarn add --dev @iconify/react

Next import the component from the iconify library

@Evavic44
Evavic44 / domain.js
Last active November 18, 2023 03:00
A list of popular email domains (TLDs) - 2023
const domains = [
"gmail.com",
"yahoo.com",
"hotmail.com",
"aol.com",
"hotmail.co.uk",
"hotmail.fr",
"msn.com",
"yahoo.fr",
"wanadoo.fr",
{
  "workbench.colorTheme": "Darker than One Dark Pro",
  "editor.minimap.enabled": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.startupEditor": "newUntitledFile",
@Evavic44
Evavic44 / Buymeacoffee.md
Last active January 19, 2024 18:53
Buymeacoffee widget React
import React, { useEffect } from "react";

export default function Buymeacoffee() {
	useEffect(() => {
		const script = document.createElement("script");
		const div = document.getElementById("supportByBMC");
		script.setAttribute("data-name", "BMC-Widget");
		script.src = "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js";
		script.setAttribute("data-id", "evavic44");
@Evavic44
Evavic44 / Utterance Widget React.md
Created March 22, 2022 12:54
Widget for GitHub comments using Utterance widget
import React, { Component } from "react";

export default class Comments extends Component {
	constructor(props) {
		super(props);
		this.commentBox = React.createRef();
	}

	componentDidMount() {
@Evavic44
Evavic44 / Chatwoot Widget React.md
Last active June 14, 2023 21:09
Chatwoot live chat widget
import React from "react";

class ChatwootWidget extends React.Component {
componentDidMount() {
  window.chatwootSettings = {
    hideMessageBubble: false,
    position: "right",
    locale: "en",
 type: "standard", // [standard, expanded_bubble]