react vaadin components

경고이 프로젝트는 Vaadin/React Components에 찬성하여 더 이상 사용되지 않습니다

@hilla/react-components 에서 가져온 React 포장지는 (적어도 아직) 서버 측 렌더링을 지원하지 않지만 다음.js 프로젝트에서 SSR 비활성화 된 동적 가져 오기로 여전히 사용할 수 있습니다.

 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 ,
} ) ;

앱에서 루모 테마를 활성화하려면 :

 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 ) ;
  } ) ( ) ;
}

Vaadin 구성 요소를 반응합니다

React Vaadin 구성 요소는 Vaadin 구성 요소를위한 반응 호환 랩퍼 세트입니다.

래퍼는 서버 측면 렌더링 가능하며 Next.js 및 Gatsby와 같은 프레임 워크와 함께 사용할 수 있습니다.

라이브 데모 (데모 소스)

빠른 시작

구성 요소 세트를 설치하십시오

npm i react-vaadin-components

설치되면 React 앱에서 구성 요소를 가져 와서 사용하십시오.

 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>