- In your React project, install dependency:
If you're using yarn:
yarn add @interchain-ui/react
If you're using npm:
npm i @interchain-ui/react
- Setting up your root layout/ route:
import { useRef, useEffect, useState } from "react"; | |
import { animateLayout } from "./animate-layout.helper"; | |
import type { AnimateLayoutProps } from "./animate-layout.types"; | |
useMetadata({ | |
rsc: { | |
componentType: "client", | |
}, | |
}); |
import { | |
onMount, | |
onUpdate, | |
useStore, | |
useRef, | |
useMetadata, | |
} from "@builder.io/mitosis"; | |
import { animateLayout } from "./animate-layout.helper"; | |
import type { AnimateLayoutProps } from "./animate-layout.types"; |
If you're using yarn:
yarn add @interchain-ui/react
If you're using npm:
npm i @interchain-ui/react
import * as React from "react"; | |
import { useMousePosition } from "~/hooks/useMousePosition"; | |
/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */ | |
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) { | |
const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {}; | |
const [mouseX, mouseY] = useMousePosition(); | |
const positions = { x, y, h, w, mouseX, mouseY }; | |
return ( | |
<div |
/** | |
* This is the generic type useful for declaring a nominal type, | |
* which does not structurally matches with the base type and | |
* the other types declared over the same base type | |
* | |
* Usage: | |
* @example | |
* type Index = Nominal<number, 'Index'>; | |
* // let i: Index = 42; // this fails to compile | |
* let i: Index = 42 as Index; // OK |
const minute = 60; | |
const hour = minute * 60; | |
const day = hour * 24; | |
const week = day * 7; | |
const month = day * 30; | |
const year = day * 365; | |
/** | |
* Convert a date to a relative time string, such as | |
* "a minute ago", "in 2 hours", "yesterday", "3 months ago", etc. |
type below:
brew update
brew install redis
To have launchd start redis now and restart at login:
brew services start redis
import React from 'react'; | |
import { useGetLatest } from './use-get-latest'; | |
export function useAsyncDebounce(defaultFn, defaultWait = 0) { | |
const debounceRef = React.useRef({}); | |
const getDefaultFn = useGetLatest(defaultFn); | |
const getDefaultWait = useGetLatest(defaultWait); | |
return React.useCallback( |
query getUsersQuery($first: Int, $last: Int, $after: Cursor, $before: Cursor, $offset: Int, $condition: UserCondition, $filter: UserFilter, $orderBy: [UsersOrderBy!]) { | |
users( | |
first: $first | |
last: $last | |
offset: $offset | |
after: $after | |
before: $before | |
condition: $condition | |
filter: $filter | |
orderBy: $orderBy |
query getActionsQuery($first: Int, $last: Int, $after: Cursor, $before: Cursor, $offset: Int, $condition: ActionCondition, $filter: ActionFilter, $orderBy: [ActionsOrderBy!]) { | |
actions( | |
first: $first | |
last: $last | |
offset: $offset | |
after: $after | |
before: $before | |
condition: $condition | |
filter: $filter | |
orderBy: $orderBy |