16.2.2
React-komponentit Kelan ja Kannan käyttöliittymiin.
Container, Row ja Column -komponentit sivun palstarakenteiden toteutukseen.
Painike sivun ylälaitaan siirtymiseen.
Murupolku sivuhierarkian esitykseen.
Komponentti kävijäseurannan ja evästeiden hyväksyntään.
Sivun alatunniste
Komponentti linkkien korostamiseen.
Linkki lisätiedolla.
Komponentti linkkien eli siirtymien esittämiseen.
Palvelukohtainen työkalupalkki.
Komponentti navigaatiorakenteiden toteutukseen.
Komponentti sisällön päälle avautuvan navigaatiovalikon toteutukseen.
Komponentti pitkien listausten sivutukseen.
Sivupalkki-komponentti navigaatiovalikon toteuttamiseen eri kokoisille näytöille.
Komponentti hyppylinkin toteutukseen.
Komponentti linkkipohjaisen navigaation toteuttamiseen.
Välilehtikomponentti sisällön jakamiseksi eri näkymiin.
Palvelukohtainen brändi-elementti.
Haitarielementti sisältöjen piilottamiseen.
Merkkilappu metatietojen esitykseen.
Komponentti erilaisten sisältöjen ryhmittelyyn ja kehystykseen.
Kortti sisältöjen ryhmittelyyn.
Puhekupla vuoropuhelun esitykseen.
Komponentti tiedon tai toiminnon näyttämiseen.
Muokattava haitarikomponentti.
Komponentti tekstisisältöjen korostukseen.
Komponentti määritelmä- tai käsitelistojen toteuttamiseen.
Sisältöjen otsikointiin.
Komponentti korostettujen linkki- tai painikelistausten esitykseen.
Komponentti sisältöjen listaukseen.
Panel-komponentti mahdollistaa saman aihealueen sisältöjen ryhmittelyn selkeisiin asiakokonaisuuksiin.
Komponentti toiminnon edistymisen näyttämiseen.
Komponentti välistysarvojen asettamiseen.
Visuaalinen komponentti tilan ja siihen liittyvän lisätiedon esittämiseen.
Komponentti tekstielementtien toteutukseen
Komponentti taulukkomuotoisen tiedon esitykseen.
Komponentti taulukoiden toteutukseen.
Nostokomponentti tiedon korostamiseen.
Aikajana vaiheiden ja prosessien esitykseen.
Työkaluvihje lisätiedon esittämiseen.
Komponentti painikkeiden ryhmittelyyn.
Painike toimintojen käynnistämiseen.
Valintaruutu yhden tai useamman vaihtoehdon valitsemiseen.
Tekstikentän ja valintalistan yhdistelmä, joka ehdottaa käyttäjälle valintoja.
Päivämäärän valinta- ja syöttökenttä.
Ajanjakson valinta- ja syöttökenttä.
Dropdown-komponentti toimintojen näyttämiseen valikossa.
Kenttä tiedostojen lähetykseen.
Komponentti syöttökenttien ryhmittelyyn.
Komponentti syöttökentän toteuttamiseen.
Pudotusvalikko valintojen tekemiseen.
Valintanappi yhden vaihtoehdon valitsemiseksi ryhmästä.
Komponentti yhden vaihtoehdon valitsemiseksi valintalistasta.
Lomakekomponentti valintaruutujen ja valintanappien ryhmittelyyn.
Valintalassotyökalu useamman valinnan tekemiseen kerralla.
Jaettu painike samankaltaisten toimintojen käynnistämiseen.
Komponentti usein toistuville lomakekentille.
Lomakkeen monirivinen tekstikenttä.
Komponentti kellonajan syöttämiseen ja valintaan.
Valintakytkin valinnan tekemiseen kahden toisensa pois sulkevan tilan väliltä.
Komponentti ilmoitusten esittämiseen.
Komponentti dialogien esitykseen.
Komponentti erilaisten lopputulosten ilmoittamiseen.
Latausindikaattori sisältöjen lataukseen.
Kuvakemainen latausindikaattori.
Komponentti kelluvien ilmoitusten esitykseen.
Neliöelementit Kanta-palveluiden brändäämiseen.
Apukomponentti Reactin portaalien toteutukseen.
React Hook ilmoitusten toteuttamiseen ruudunlukijalle.
React Hook, joka piilottaa ja näyttää BackToTop-komponentin valmiilla asetuksilla.
React Hook sisällön näyttämiseen ja piilottamiseen.
Debounce-funktio suorituskyvyn optimointiin.
React Hook, jonka avulla voi tarkistaa renderöidäänkö komponenttia ensimmäistä kertaa.
React Hook media queryn tarkkailuun JavaScriptissa.
React Hook ulkoasuteeman tilan vaihtamiseen.
React Hook kohdistuksen hallintaan HTML-elementeille, jotka eivät normaalisti saa kohdistusta.
React Hook elementin ulkopuolisen klikkauksen tunnistamiseen.
React Hook sivutuksen toteuttamiseen.
UsePrevious-hook edellisen propin tai tilan arvon tallennukseen.
React Hook HTML-elementin koon muutosten tarkkailuun.
React Hook valintalasson toteuttamiseen.
Throttle-funktio suorituskyvyn optimointiin.
UseSort-hookia voi käyttää mm. taulukon rivien järjestämiseen.
UseToggle-hookia käytetään boolean-tyyppisten tilojen luomiseen.