Download do nextjs toploader - nextjs toploader Código Download

nextjs toploader

Código-Fonte de IA

v3.7.15

Baixar

Próximo Topuller JS

Um componente da barra de carregamento superior do próximo.JS fabricado usando nProgress, trabalha com o Next.js 14 e reage.

Instalar

Usando NPM:

npm install nextjs-toploader

Usando o fio:

yarn add nextjs-toploader

Uso

importação usando:

 import NextTopLoader from 'nextjs-toploader' ;

Uso com `app/layout.js` para estrutura de pastas de `app`

Para renderizar, adicione <NextTopLoader /> ao seu return() dentro do <body></body> de RootLayout() :

 import NextTopLoader from 'nextjs-toploader' ;

export default function RootLayout ( { children } ) {
  return (
    < html lang = "en" >
      < body >
        < NextTopLoader />
        { children }
      </ body >
    </ html >
  ) ;
}

Uso com `pages/_app.js` para `pages` Estrutura de pastas

Para renderizar add <PagesTopLoader /> ao seu return() em MyApp() (recomendado):

 import { PagesTopLoader } from 'nextjs-toploader/pages' ;

export default function MyApp ( { Component , pageProps } ) {
  return (
    < >
      < PagesTopLoader />
      < Component { ... pageProps } /> ;
    </ >
  ) ;
}

Você também pode usar <NextTopLoader /> no roteador pages , mas é recomendável usar <PagesTopLoader /> para suporte do gancho useRouter do nextjs-toploader versão 2.6.12 em diante

Compatibilidade com o gancho `useRouter`

`useRouter` Uso do gancho com `app/layout.js` para estrutura de pastas de `app`

Para acionar o Toploader ao usar useRouter Hook (roteador de aplicativos):

 // Import the useRouter hook from nextjs-toploader to trigger the TopLoader

import { useRouter } from 'nextjs-toploader/app' ;

Em seguida, basta usá -lo em seu código, por exemplo:

 const router = useRouter ( ) ;
router . push ( '/some-page' ) ;

`useRouter` Uso do gancho com `pages/_app.js` para `pages` Estrutura de pastas

Para acionar o Toploader ao usar useRouter Add <PagesTopLoader /> ao seu return() em MyApp() :

 import { PagesTopLoader } from 'nextjs-toploader/pages' ;

export default function MyApp ( { Component , pageProps } ) {
  return (
    < >
      < PagesTopLoader />
      < Component { ... pageProps } /> ;
    </ >
  ) ;
}

Uso com React, Vite React ou qualquer outra estrutura baseada em React

Para renderizar, adicione <NextTopLoader /> ao seu return() dentro do componente no App() em seu app.js:

 import NextTopLoader from 'nextjs-toploader' ;
const App = ( ) => {
  return (
    < div >
      < Router >
        < NextTopLoader />
        < Routes > { /* Your Routes Here */ } </ Routes >
      </ Router >
    </ div >
  ) ;
} ;

export default App ;

Configuração padrão

Se nenhum adereço for passado para <NextTopLoader /> , abaixo está a configuração padrão aplicada.

 < NextTopLoader
  color = "#2299DD"
  initialPosition = { 0.08 }
  crawlSpeed = { 200 }
  height = { 3 }
  crawl = { true }
  showSpinner = { true }
  easing = "ease"
  speed = { 200 }
  shadow = "0 0 10px #2299DD,0 0 5px #2299DD"
  template = '<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  zIndex = { 1600 }
  showAtBottom = { false }
/>

color : Para alterar a cor padrão do Toploader.
initialPosition : Para alterar a posição inicial para o toploader em porcentagem,: 0.08 = 8% .
crawlSpeed : Incremento a velocidade de atraso no ms .
speed : velocidade de animação para o Toploader em ms
easing : configurações de animação usando a flexibilização (uma corda de facilidade de facilidade).
height : Altura do Toploader no px .
crawl : Comportamento de incremento automático para o Toploader.
showSpinner : para mostrar o Spinner ou não.
shadow : uma sombra suave para o Toploader. (defina como false para desativá -lo)
template : para incluir atributos HTML personalizados para o TOPLOADER.
zIndex : define o Zindex para o Toploader.
showAtBottom : para mostrar o Toploader na parte inferior. (Aumente a altura do Toploader para garantir sua visibilidade nos dispositivos móveis)

`NextTopLoaderProps` (adereços passados para o Toploader)

Nome	Tipo	Valor padrão
`color`	`string`	`"#2299DD"`
`initialPosition`	`number`	`0.08`
`crawlSpeed`	`number`	`200`
`height`	`number`	`3`
`crawl`	`boolean`	`true`
`showSpinner`	`boolean`	`true`
`easing`	`string`	`"ease"`
`speed`	`number`	`200`
`shadow`	`string \| false`	`"0 0 10px #2299DD,0 0 5px #2299DD"`
`template`	`string`	`"<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>"`
`zIndex`	`number`	`1600`
`showAtBottom`	`boolean`	`false`
`showForHashAnchor`	`boolean`	`true`

Colaboradores

Contribuintes de código

Este projeto foi possível graças às contribuições de seus colaboradores de código.

Contribuintes financeiros

Apoie este projeto com sua organização. Seu logotipo aparecerá aqui com um link para o seu site. Você pode apoiar este projeto no método coletivo aberto ou equivalente a partir do abaixo

UPI ID: THESGJ@UPI (ID da UPI Internacional)

Expandir

Informações adicionais