https://github.com/ara-framework/nova-react-bridge

Nova Bridge for React
https://github.com/ara-framework/nova-react-bridge

Last synced: 4 days ago
JSON representation

Nova Bridge for React

• Host: GitHub
• URL: https://github.com/ara-framework/nova-react-bridge
• Owner: ara-framework
• Created: 2019-08-13T03:50:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-02T22:42:38.000Z (about 2 years ago)
• Last Synced: 2024-12-10T19:13:48.839Z (28 days ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/nova-react-bridge
• Size: 185 KB
• Stars: 5
• Watchers: 3
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nova React Bridge

This package contains a React component named `Nova` that renders a placeholder also known as [Nova Directive](https://github.com/ara-framework/ara-cli/wiki)

Rendered placeholder:

```html



<!--{"brand":"Ara Framework","links":[{"url":"https://github.com/ara-framework","text":"Github"}]}-->


```

On **Client-Side Rendering** the placeholder is where the component is going to be mounted or hydrated depending on the framework or library.

On **Server-Side Rendering** the placeholder is used by [Nova Proxy](https://github.com/ara-framework/nova-proxy) or [Nova Static](https://github.com/ara-framework/nova-static) to Server-Side Include the HTML rendered by [Hypernova](https://github.com/airbnb/hypernova).

## Install

```

npm install nova-react-bridge

```

## Usage

The `Nova` component requires the props `name` and `data`

- `name` is the registered view in Hypernova.

- `data` is the data necessary to render the view.

```jsx

import { Nova } from 'nova-react-bridge'

const Page = () => (

  


    

  

)

```


### Mounting Hypernova Client Component

The `Nova` component emits a custom event called `NovaMount` on the `document` when the React component is mounted. The event needs to be listened by the Hypernova's client script in order to mount the view when the placeholder is ready.

```js

import { renderClient } from 'hypernova-redom'

document.addEventListener('NovaMount', (event) => {

  const { detail: { name, id } } = event

  if (name === 'NavBar') {

    return renderClient(name, NavBar, id)

  }

})

```

The example above is using the method `renderClient` from `hypernova-redom`, this method should be available for the other supported [bindings](https://github.com/ara-framework/ara-cli/wiki/Supported-Hypernova-Bindings).