Del Posts - Answer Overflow

Del

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

•Created by Del on 3/10/2023 in #questions

React Hook Form: Number Input not respecting Min/Max values

<input
    {...register("fromAmount", {
        valueAsNumber: true,
        min: 5,
        max: price.data
            ? price.data.from.max
            : Infinity,
    })}
    type="number"
    className="col-start-1 row-start-1 h-full w-full rounded-xl bg-[#373254] pl-4"
/>

<input
    {...register("fromAmount", {
        valueAsNumber: true,
        min: 5,
        max: price.data
            ? price.data.from.max
            : Infinity,
    })}
    type="number"
    className="col-start-1 row-start-1 h-full w-full rounded-xl bg-[#373254] pl-4"
/>

Have some dynamic min/max values that I get from a trpc endpoint so I can't just define min/max values in my zod schema For some reason, I can't get number inputs to honor the min/max defined within the register params. https://codesandbox.io/s/sharp-wilson-578ie6?file=/src/App.tsx Any help/advice would be appreciated

2 replies

TTCTheo's Typesafe Cult

•Created by Del on 3/9/2023 in #questions

ReactHookForm + ZOD: Validating against stateful values

Hi, I'm currently trying to build a currency conversion app as a personal project, I have an input form that allows a user to pick their desired currency to send/receive, when this choice happens I query an API which returns a MIN/MAX value to transact. How do I make another currency amount input use these as rules? I can use the native html rules like:

<input min={minValueState} max={maxValueState}>

<input min={minValueState} max={maxValueState}>

But these do not provide errors in the same way that the ZOD resolver does.

3 replies

TTCTheo's Typesafe Cult

•Created by Del on 2/25/2023 in #questions

Caching Data for a trpc endpoint

I need to hit an external API every few minutes to update my local data Call this BigDataList I have a trpc endpoint - GetOne GetOne edits and reformats a single item of BigDataList and returns it How would I go about caching BigDataList so it only updates every few minutes?

4 replies

TTCTheo's Typesafe Cult

•Created by Del on 2/12/2023 in #questions

Off-Topic Animating using Framer

I'm trying to build a vertical carousel in react and I'm really stuck on how to actually animate the position changes

import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Home: NextPage = () => {
    const itemNames = ["item1", "item2", "item3", "item4", "item5"];
    const minItems = 20;

    let itemArr: string[] = [];
    if (itemNames.length < minItems) {
        const timesMultiplied = Math.ceil(minItems / itemNames.length);
        for (let i = 0; i < timesMultiplied; i++) {
            itemArr = itemArr.concat(itemNames);
        }
    }

    const [itemOrder, setItemOrder] = useState(itemArr);


    return (
        <>
            <Head>
                <title>Create T3 App</title>
                <meta name="description" content="Generated by create-t3-app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main>
                {/* Infinite Vertical Carousel */}
                <AnimatePresence>
                    <div className=" relative grid max-h-[1300px] grid-cols-1 gap-5 overflow-y-hidden bg-slate-300 transition-all">
                        {itemOrder.map((item, i) => {
                            const pos = i;

                            return (
                                <motion.div
                                    className={
                                        "absolute top-0 h-24 w-80 border border-solid border-gray-500 transition-all" +
                                        (i == 5 ? " bg-red-500" : "")
                                    }
                                    key={i}
                                    style={{
                                        top: pos * 110,
                                    }}
                                    onClick={() => {
                                        console.log(pos);
                                    }}
                                    layout
                                >
                                    {item}
                                </motion.div>
                            );
                        })}
                    </div>
                </AnimatePresence>
                <button
                    onClick={() => {
                        const arrayCopy = [...itemOrder];
                        const lastItem = arrayCopy.pop() as string;

                        arrayCopy.unshift(lastItem);
                        setItemOrder(arrayCopy);
                    }}
                >
                    Shift Down
                </button>
            </main>
        </>
    );
};

export default Home;

import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Home: NextPage = () => {
    const itemNames = ["item1", "item2", "item3", "item4", "item5"];
    const minItems = 20;

    let itemArr: string[] = [];
    if (itemNames.length < minItems) {
        const timesMultiplied = Math.ceil(minItems / itemNames.length);
        for (let i = 0; i < timesMultiplied; i++) {
            itemArr = itemArr.concat(itemNames);
        }
    }

    const [itemOrder, setItemOrder] = useState(itemArr);


    return (
        <>
            <Head>
                <title>Create T3 App</title>
                <meta name="description" content="Generated by create-t3-app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <main>
                {/* Infinite Vertical Carousel */}
                <AnimatePresence>
                    <div className=" relative grid max-h-[1300px] grid-cols-1 gap-5 overflow-y-hidden bg-slate-300 transition-all">
                        {itemOrder.map((item, i) => {
                            const pos = i;

                            return (
                                <motion.div
                                    className={
                                        "absolute top-0 h-24 w-80 border border-solid border-gray-500 transition-all" +
                                        (i == 5 ? " bg-red-500" : "")
                                    }
                                    key={i}
                                    style={{
                                        top: pos * 110,
                                    }}
                                    onClick={() => {
                                        console.log(pos);
                                    }}
                                    layout
                                >
                                    {item}
                                </motion.div>
                            );
                        })}
                    </div>
                </AnimatePresence>
                <button
                    onClick={() => {
                        const arrayCopy = [...itemOrder];
                        const lastItem = arrayCopy.pop() as string;

                        arrayCopy.unshift(lastItem);
                        setItemOrder(arrayCopy);
                    }}
                >
                    Shift Down
                </button>
            </main>
        </>
    );
};

export default Home;

This might be a fundamental misunderstanding about how framer motion works etc, any help is really appreciated

2 replies

TTCTheo's Typesafe Cult

•Created by Del on 1/31/2023 in #questions

Nested Params

Trying to get a nested param variable rn Have

[slug]
- index.tsx
    [section]
    - index.tsx

[slug]
- index.tsx
    [section]
    - index.tsx

Looking to prerender a bunch of separate section pages for each main slug, just curious if you have anybody has any examples/docs of how I actually manage the params with getstaticpaths/getstaticprops

1 replies

TTCTheo's Typesafe Cult

•Created by Del on 1/24/2023 in #questions

Easiest to integrate CMS?

Thinking about starting a project that requires a ton of markdown files to be edited from multiple places, Needing a CMS to achieve what I'm looking to do but can't figure out which one I should opt for since I haven't had much experience with using CMS combined with T3, Does anybody have any recommendations for something that works well with typescript?

12 replies

Gaming

Programming