next-layout icon indicating copy to clipboard operation
next-layout copied to clipboard

TypeScript support?

Open DaniGuardiola opened this issue 4 years ago • 1 comments

I can help :)

DaniGuardiola avatar Feb 22 '21 11:02 DaniGuardiola

I was create a PR contain the declaration file in https://github.com/moxystudio/next-layout/pull/11.

While waiting for PR to be reviewed, you can follow this step to add declaration for @moxy/next-layout module manually into your Next.js project.

Step 1

Create a file with name next-layout.d.ts in Root folder of your Next.js project.

Step 2

Put the declaration code below into next-layout.d.ts file:

declare module '@moxy/next-layout' {
  import { ReactElement } from 'react'
  import { NextComponentType, NextPageContext } from 'next'

  export type InjectedPageProps<State = {}> = {
    setLayoutState: (state: State | ((currentState: State) => State)) => void
  }

  export function withLayout<
    State = {},
    PageProps = {},
    Layout = FC<PageProps>,
    Page = FC<InjectedPageProps & PageProps>
  >(
    layout: Layout | ((state: State) => Layout),
    initialLayoutState?: State | ((props: PageProps) => State)
  ): (page: Page) => FC<Page>

  export function LayoutTree<
    PageProps = {},
    Layout = FC,
    Children = FC<FC>
  >(props: {
    Component: NextComponentType<NextPageContext, any, {}>
    pageProps: PageProps
    pageKey?: string
    defaultLayout?: Layout
    children?: Children
  }): ReactElement
}

Step 3

Finish. Module @moxy/next-layout can be used completely in your Next.js project with some Typescript suggestion.


CC @satazor

lamualfa avatar Sep 10 '21 07:09 lamualfa