Téléchargement nextjs toploader - Téléchargement du code source nextjs toploader

nextjs toploader

Code Source AI

v3.7.15

Télécharger

Next js toploader

Un composant de barre de chargement NEXT.JS Fabriqué à l'aide de NProgress, fonctionne avec Next.js 14 et réagir.

Installer

Utilisation de NPM:

npm install nextjs-toploader

Utilisation du fil:

yarn add nextjs-toploader

Usage

importation en utilisant:

 import NextTopLoader from 'nextjs-toploader' ;

Utilisation avec `app/layout.js` pour la structure des dossiers `app`

Pour rendu ajouter <NextTopLoader /> à votre return() à l'intérieur du <body></body> de RootLayout() :

 import NextTopLoader from 'nextjs-toploader' ;

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

Utilisation avec `pages/_app.js` pour `pages` Structure du dossier

Pour rendre Ajouter <PagesTopLoader /> à votre return() dans MyApp() (recommandé):

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

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

Vous pouvez également utiliser <NextTopLoader /> dans pages Router, mais il est recommandé d'utiliser <PagesTopLoader /> pour la prise en charge du crochet useRouter à partir de la version 2.6.12 de nextjs-toploader

Compatibilité avec le crochet `useRouter`

Utilisation `useRouter` Hook avec `app/layout.js` pour la structure du dossier de `app`

Pour déclencher un toploader lors de l'utilisation de Hook useRouter (routeur de l'application):

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

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

Ensuite, utilisez-le simplement dans votre code par exemple:

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

`useRouter` Utilisation du crochet avec `pages/_app.js` pour `pages` Structure du dossier

Pour déclencher TopLoader lors de l'utilisation useRouter Add <PagesTopLoader /> à votre return() dans MyApp() :

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

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

Utilisation avec React, Vite React ou tout autre cadre basé sur React

Pour rendre Ajouter <NextTopLoader /> à votre return() dans le composant dans App() dans votre app.js:

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

export default App ;

Configuration par défaut

Si aucun accessoire n'est transmis à <NextTopLoader /> , ci-dessous est la configuration par défaut appliquée.

 < 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 : pour modifier la couleur par défaut de Toploader.
initialPosition : pour modifier la position initiale pour le toploader en pourcentage, 0.08 = 8% .
crawlSpeed : vitesse d'incrémentation de la vitesse de ms .
speed : vitesse d'animation pour le toploader dans ms
easing : paramètres d'animation utilisant l'assouplissement (une chaîne d'assistance CSS).
height : hauteur de toploader en px .
crawl : Comportement d'incrémentation automatique pour le toploader.
showSpinner : pour montrer un spinner ou non.
shadow : une ombre lisse pour le toploader. (réglé sur false pour le désactiver)
template : Pour inclure des attributs HTML personnalisés pour le toploader.
zIndex : définit Zindex pour le toploader.
showAtBottom : Pour montrer le toploader en bas. (Augmentez la hauteur du toploader pour garantir sa visibilité sur les appareils mobiles)

`NextTopLoaderProps` (accessoires passés au toploader)

Nom	Taper	Valeur par défaut
`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`

Contributeurs

Contributeurs de code

Ce projet a été rendu possible grâce aux contributions de ses contributeurs de code.

Contributeurs financiers

Soutenez ce projet avec votre organisation. Votre logo apparaîtra ici avec un lien vers votre site Web. Vous pouvez soutenir ce projet sur une méthode collective ou équivalente ouverte à partir de ce qui est ci-dessous

UPI ID: thesgj @ upi (International UPI ID)

Développer

Informations supplémentaires