Skip to content

Instantly share code, notes, and snippets.

View alieslamifard's full-sized avatar
🏠
Working from home

Ali Eslamifard alieslamifard

🏠
Working from home
  • Homeday
View GitHub Profile
@alieslamifard
alieslamifard / Input Component
Last active April 26, 2021 12:19
React input component with Persian/Arabic to English number/digit compatibility (Tested with react-hook-form)
import React, { InputHTMLAttributes, useEffect, useRef } from 'react';
// Persian/Arabic To English Number
const f2e = (event) => {
event.target.value = event.target.value
.replace(/[٠-٩]/g, (d) => '٠١٢٣٤٥٦٧٨٩'.indexOf(d))
.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d));
return event;
};
import React from 'react';
import Link from 'next/link';
export default function HomePage() {
return (
<div>
<h2>Hello World!</h2>
<Link href="/dashboard">Go to Dashboard</Link>
</div>
);
import React from 'react';
import withPrivateRoute from '../components/withPrivateRoute';
const Dashboard = () => {
return <div>This is a Dashboard page which is private.</div>;
};
Dashboard.getInitialProps = async props => {
console.info('##### Congratulations! You are authorized! ######', props);
return {};
@alieslamifard
alieslamifard / withPrivateRoute.jsx
Last active May 31, 2023 20:10
Private route HOC for Next.js
import React from 'react';
import Router from 'next/router';
const login = '/login?redirected=true'; // Define your login route address.
/**
* Check user authentication and authorization
* It depends on you and your auth service provider.
* @returns {{auth: null}}
*/
const [installationStatus, installationEvent] = useInstallPrompt(true);
useEffect(() => {
// installationStatus is one of these states: null/dismissed/accepted/installed
if(installationStatus === 'accepted') {
// User accept it. You can save it in some log with device config.
}
// Show Add-to-home-screen prompt, if user have it's condition.
if(installationEvent) {
const isOnline = useNetwork(); // true/false
const isVisible = useVisibility(); // true/false
const isPwa = usePwa(); // true/false
useEffect(() => {
console.log(Device());
})
// {
// "browser": {
// "name": "Safari",
// "version": "11.0"
// },
// "os": {
// npm install react-pwa-toolkit
import React from "react";
import Device, { useNetwork, usePwa, useVisibility, useInstallPrompt } from "react-pwa-toolkit";