theodorusclarence / rhf-input

React Hook Form Input Defaults

This is a NextJs and Tailwind project bootstrapped using nextjs-tailwind-starter created by Theodorus Clarence.

See the deployment on https://nextjs-tailwind-starter.theodorusclarence.com/

Getting Started

To use this starter, you can use create-next-app to do it by:

npx create-next-app -e https://github.com/theodorusclarence/nextjs-tailwind-starter project-name

or

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

What's Inside

Inter Fonts

Inter fonts is self hosted. The default weights are 400, 600, 700. To add more, use fontsquirrel.

UnstyledLink Component

Used as a component for Next.js Link. Will render out Next/Link if the href started with / or #, else will render an a tag with target='_blank'.

CustomLink Component

An extension of UnstyledLink Component, you can add your default styling for a button/link.

<UnstyledLink
      className={`${props.className} inline-flex items-center font-bold hover:text-primary-400`}
      {...props}
    >
  {props.children}
</UnstyledLink>

Default Favicon Declaration

Use Favicon Generator and then overwrite the files in /public/favicon

Just-In-Time Tailwindcss

Defaulted to true, you can uncomment the mode='jit' in /tailwind.config.js

Default Styles

There are default styles for responsive heading sizes, and .layout to support a max-width for larger screen size.

Seo Component

Configure the default in /components/Seo.jsx. If you want to use the default, just add <Seo /> on top of your page.

You can also customize it per page by overriding the title, description as props

<Seo
  title='Next.js Tailwind Starter'
  description='your description'
/>

rhf-input's Issues

By any change can we see the code of the multi step wizard?

By any change can we see the code of the multi step wizard?
Its not in the repo have been trying for ages to get it to work, is the source available somewhere?
Kind regards.

Also some installation instructions would be nice, I have no idea how to integrate your components with my app based on the documentation. Kind regards

Warning: Prop `id` did not match. Server: "react-select-11-input" Client: "react-select-2-input"

Hello,

Thanks for your work. There is a bug related to react-select, in order to avoid this error:

""" starts """

react-dom.development.js?61bb:67 Warning: Prop id did not match. Server: "react-select-11-input" Client: "react-select-2-input"
at input
at div
at AutosizeInput (webpack-internal:///./node_modules/react-input-autosize/lib/AutosizeInput.js:78:3)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at Input (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:1287:25)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at ValueContainer (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:912:24)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at Control (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:1174:24)
at div
at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-a8309070.browser.esm.js:46:66)
at SelectContainer (webpack-internal:///./node_modules/react-select/dist/index-4bd03571.esm.js:880:24)
at Select (webpack-internal:///./node_modules/react-select/dist/Select-dbb12e54.esm.js:1176:87)
at StateManager (webpack-internal:///./node_modules/react-select/dist/stateManager-845a3300.esm.js:38:89)
at Controller (webpack-internal:///./node_modules/react-hook-form/dist/index.esm.js:227:37)
at div
at div
at ReactSelect (webpack-internal:///./components/ReactSelect.jsx:28:23)
at div
at section
at ReactSelectSection
at form
at FormProvider (webpack-internal:///./node_modules/react-hook-form/dist/index.esm.js:87:147)
at div
at div
at main
at InputsPage (webpack-internal:///./pages/myform.jsx:49:73)
at MyApp (webpack-internal:///./pages/_app.js:23:24)
at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:160:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:648:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:784:25)

"" end """

If we add this line to ReactSelect.jsx component, it works fine,

--starts--
<Controller
name={id}
isClearable
defaultValue={
defaultValue ? { value: defaultValue, label: defaultValue } : ''
}
control={control}
rules={validation}
render={({ field }) => {
const styles = errors[id] ? errorStyles : customStyles;
return (
<Select
id={id} ==== I also moved this line here ======
instanceId={id} ======= This line makes it work without problem ===
{...field}
isMulti
isDisabled={disabled}
placeholder={placeholder}
options={optionsObject}
styles={styles}
/>
);
}}
/>

• ends -

so to recap :

<Select
id={id}
instanceId={id}

Yours, Marc