Principali esempi di componenti appiccicosi React.js

Blog

Principali esempi di componenti appiccicosi React.js

1. Reagire con gli sticky

Note adesive per l'applicazione React (basata su DraftJS)



Reagire Stickies

Caratteristiche



  • Note adesive Pure React
  • Sticky trascinabili e ridimensionabili
  • Contenuto in linea modificabile
  • Colori adesivi configurabili
  • Data e ora dell'ultimo aggiornamento
  • Nastro configurabile

Dimostrazione: https://ajainvivek.github.io/react-stickies/

Visualizza su Github



2. Stickyroll

Stickyroll è il successore di react-over-scroll. Questo progetto è mantenuto come un monorepo via lerna.

Stickyroll

Stickyroll traduce lo scorrimento della pagina in paginazione e una sequenza temporale di avanzamento. La vista usa position: sticky per rimanere in vista.

Visualizza demo: https://stickyroll.netlify.com/#!/themes/7

Visualizza su github

3. Reagire Stickynode

Un componente appiccicoso React performante e completo.

Caratteristiche

  • Recupera scrollTop solo una volta per tutti i componenti permanenti.
  • Ascolta lo scorrimento limitato per avere prestazioni migliori.
  • Usa rAF per aggiornare lo stato appiccicoso per avere prestazioni migliori.
  • Supporta l'offset superiore dalla parte superiore dello schermo.
  • Supporta il limite inferiore per interrompere lo stato appiccicoso.
  • Supporta qualsiasi obiettivo appiccicoso con varie unità di larghezza.

Reagire Stickynode

Visualizza su github

4. Sinossi

StickyNode è un componente React che sarà sempre all'interno di un contenitore specificato. Può essere utile per un tooltip, ecc.

Sinossi

Visualizza su Github

5. Reagire allo stato appiccicoso

Il componente React Sticky[State] rende position:sticky statefull e polyfills la funzione sticky del browser mancante.

Reagire allo stato appiccicoso

Visualizza su github

6. React Listview Sticky Header

Reagisci alla visualizzazione elenco con l'intestazione della sezione appiccicosa.

non riesco a cercare su facebook

Reagisci Listview Sticky Header

Visualizza demo: https://cht8687.github.io/react-listview-sticky-header/example/

Visualizza su github

7. Reagire Headroom

React Headroom è un componente React per nascondere/mostrare la tua intestazione durante lo scorrimento. L'intestazione di questo sito è un esempio vivente. Quando scorri verso il basso, scompare dalla vista e torna indietro quando scorri verso l'alto.

Reagire Headroom

Visualizza su Github

8. Reagisci appiccicoso

Rendi appiccicosi i tuoi componenti React!

Reagisci appiccicoso

Visualizza su Github

Grazie per aver letto!!

#reactjs #javascript