Descarga de nextjs toploader - Descargar el código fuente nextjs toploader

nextjs toploader

Código Fuente de IA

v3.7.15

Descargar

Siguiente cargador superior JS

Un componente de barra de carga superior Next.js hecho con NProgress, funciona con Next.js 14 y Reaccion.

Instalar

Usando NPM:

npm install nextjs-toploader

Usando hilo:

yarn add nextjs-toploader

Uso

importar usando:

 import NextTopLoader from 'nextjs-toploader' ;

Uso con `app/layout.js` para la estructura de la carpeta de `app`

Para renderizar agregar <NextTopLoader /> a su return() dentro del <body></body> de RootLayout() ::

 import NextTopLoader from 'nextjs-toploader' ;

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

Uso con `pages/_app.js` para la estructura de la carpeta de `pages`

Para renderizar agregar <PagesTopLoader /> a su return() en MyApp() (recomendado):

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

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

También puede usar <NextTopLoader /> en el enrutador pages , pero se recomienda usar <PagesTopLoader /> para useRouter Hook Support de nextjs-toploader Versión 2.6.12 en adelante

Compatibilidad con `useRouter` Hook

`useRouter` Hook Uso con `app/layout.js` para la estructura de la carpeta de `app`

Para activar el cargador superior cuando se usa useRouter Hook (enrutador de aplicaciones):

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

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

Entonces simplemente úselo en su código, por ejemplo:

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

`useRouter` Hook Uso con `pages/_app.js` para la estructura de la carpeta de `pages`

Para activar el cargador superior cuando se usa useRouter Agregar <PagesTopLoader /> a su return() en MyApp() ::

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

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

Uso con React, Vite React o cualquier otro marco basado en React

Para renderizar agregar <NextTopLoader /> a su return() dentro del componente en App() en su App.js:

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

export default App ;

Configuración predeterminada

Si no se pasan los accesorios a <NextTopLoader /> , a continuación se aplica la configuración predeterminada 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 cambiar el color predeterminado del cargador superior.
initialPosition : para cambiar la posición inicial para el cargador superior en porcentaje ,: 0.08 = 8% .
crawlSpeed : velocidad de retraso de incremento en ms .
speed : Velocidad de animación para el cargador superior en ms
easing : Configuración de animación utilizando Easir (una cadena CSS Siving String).
height : Altura del cargador superior en px .
crawl : comportamiento de incremento automático para el cargador superior.
showSpinner : para mostrar spinner o no.
shadow : una sombra suave para el cargador superior. (Establecer en false para deshabilitarlo)
template : incluir atributos HTML personalizados para el cargador superior.
zIndex : Define Zindex para el cargador superior.
showAtBottom : para mostrar el cargador superior en la parte inferior. (Aumente la altura para el cargador superior para garantizar su visibilidad en los dispositivos móviles)

`NextTopLoaderProps` (accesorios pasados al cargador superior)

Nombre	Tipo	Valor predeterminado
`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

Contribuyentes de código

Este proyecto fue posible gracias a las contribuciones de sus contribuyentes de código.

Contribuyentes financieros

Apoye este proyecto con su organización. Su logotipo aparecerá aquí con un enlace a su sitio web. Puede admitir este proyecto sobre el método abierto colectivo o equivalente desde el siguiente

ID de UPI: thesgj@UPI (ID internacional de UPI)

Expandir

Información adicional