react vaadin components

PERINGATAN Proyek ini sudah usang mendukung Vaadin/React-Components

Pembungkus bereaksi yang diimpor dari @hilla/react-components tidak (setidaknya belum) mendukung rendering sisi server, tetapi mereka masih dapat digunakan dalam proyek berikutnya.

 import dynamic from "next/dynamic" ;

export const Button = dynamic <
  import ( "@hilla/react-components/Button.js" ) . ButtonProps
> ( ( ) => import ( "@hilla/react-components/Button.js" ) . then ( ( mod ) => mod . Button ) , {
  ssr : false ,
} ) ;

Untuk mengaktifkan tema Lumo di aplikasi:

 if ( typeof window !== "undefined" ) {
  ( async ( ) => {
    const allImports = await import (
      "@vaadin/vaadin-lumo-styles/all-imports.js"
    ) ;

    const style = document . createElement ( "style" ) ;
    Object . values ( allImports ) . forEach ( ( css ) => {
      style . append ( document . createTextNode ( css . toString ( ) ) ) ;
    } ) ;
    document . head . append ( style ) ;
  } ) ( ) ;
}

Bereaksi komponen Vaadin

Komponen React Vaadin adalah seperangkat pembungkus yang kompatibel untuk komponen Vaadin.

Pembungkusnya dapat diterjemahkan oleh sisi server dan dapat digunakan dengan kerangka kerja seperti Next.js dan Gatsby.

Demo Langsung (Sumber Demo)

Awal yang cepat

Instal set komponen

npm i react-vaadin-components

Setelah diinstal, impor dan gunakan komponen di aplikasi React Anda

 import 'react-vaadin-components/dist/css/core.css'

...

import {
  TextField ,
  Button ,
  Notification
} from 'react-vaadin-components' ;

...

const [ name , setName ] = useState ( "" ) ;

...
< TextField
  label = "Name"
  clearButtonVisible
  onValueChanged = { e => setName ( e . detail . value ) } >
</ TextField >

< Button
  theme = "primary"
  disabled = { ! name }
  onClick = { e => Notification . show ( `Hello ${ name } ` ) } >
  Say Hello
< / Button>