Wiki Snippets

'use client'
import { createContext, useContext, useState } from 'react';
 
export const MyContext = createContext();
 
export function MyProvider({children}) {
const [mymessage, setMymessage] = useState("");
 
return (
    <MyContext.Provider value={{ mymessage, setMymessage }}>
        {children}
    </MyContext.Provider>
    )
}
 
export function useMy() {
    const context = useContext(MyContext)
    if (!context) {
        throw new Error('useTheme must be used within ThemeProvider')
    }
    return context;
}

 
const { mymessage } = useMy();
 
console.info(mymessage);

 
const { setMymessage } = useMy();
 
setMymessage('message fror Navbar');

const exec = require('child_process').exec
var yourExecCmd = 'ls -ltr'
 
// Function to exec shell cmd with callback
function execWithCallback() {
    this.execCommand = function(cmd, callback) {
        exec(cmd, (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`)
                return
            }
            console.log('stdout:', stdout)
            console.log('stderr:', stderr)
            callback(stdout)
        })
      }
  }
 
var execWithCallback = new execWithCallback()
execWithCallback.execCommand(yourExecCmd, function (result) {
    console.log('result')
    console.log(result)
})

import dynamic from 'next/dynamic'
const DynamicButton = dynamic(() => import('./dynamicButton'), { ssr: true })
...
return showButton && <DynamicButton />

git commit --amend -m "an updated commit message"

git fetch --prune origin

<Box
  sx={(theme) => ({
    textAlign: 'center',
    [theme.breakpoints.up('md')]: { textAlign: 'left' },
  })}
>
  TEXT
</Box>

const hostname = "www.someaddress.com"
console.log(!!hostname.startsWith('www.') ? 'matching' : 'not matching')

'use client'
import {usePathname, useParams, useSearchParams} from "next/navigation";
 
    // folder structure: app/team/[teamName]/page.tsx
    // url: http://localhost:3002/team/something?query=mine
    /* Expected output:
    Pathname: /team/something
    Params: something
    SearchParams: mine
    */
    export default function Page() {
 
    let queryResult: string | null | undefined = null
 
    // params dataset placeholder
    let params: Record<string, string | string[]> | null
 
    const pathName = usePathname()
    params = useParams()
    const searchParams = useSearchParams() 
    queryResult = searchParams?.get('query')    
 
    return (
        <>
        <div><span>Pathname: </span>{pathName}</div>
        <div><span>Params: </span>{params?.teamName}</div>
        <div><span>SearchParams: </span>{queryResult}</div>
        </>
    )
}