https://github.com/tomivirkki/react-vaadin-components

React wrappers for Vaadin Components
https://github.com/tomivirkki/react-vaadin-components

components react ui vaadin

Last synced: 4 months ago
JSON representation

React wrappers for Vaadin Components

• Host: GitHub
• URL: https://github.com/tomivirkki/react-vaadin-components
• Owner: tomivirkki
• License: mit
• Created: 2018-09-28T08:27:18.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T08:45:32.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T08:20:00.911Z (4 months ago)
• Topics: components, react, ui, vaadin
• Language: TypeScript
• Homepage: https://react-vaadin-components.vercel.app/
• Size: 17.8 MB
• Stars: 14
• Watchers: 3
• Forks: 6
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
> **Warning**

> **This project is deprecated** in favor of [vaadin/react-components](https://github.com/vaadin/react-components)

> 

> The React wrappers imported from `@hilla/react-components` don't (at least yet) support server-side rendering, but they can still be used in a Next.js project as a dynamic import with [SSR disabled](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr):

> ```js

> 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,

> });

> ```

> 

> To enable Lumo theme in the app:

>

> ```js

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

>   })();

> }

> ```

# React Vaadin Components

React Vaadin Components is a set of React compatible wrappers for [Vaadin components](https://vaadin.com/docs/latest/components).

The wrappers are server side renderable and can be used with frameworks such as Next.js and Gatsby.

**[Live Demo](https://react-vaadin-components.vercel.app/)** ([Demo source](https://github.com/tomivirkki/react-vaadin-components/tree/master/examples/next))

## Quick start

Install the component set

```sh

npm i react-vaadin-components

```

Once installed, import the and use the components in your React app

```jsx

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

...

import {

  TextField,

  Button,

  Notification

} from 'react-vaadin-components';

...

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

...

 setName(e.detail.value)}>

 Notification.show(`Hello ${name}`)}>

  Say Hello

```