# @arice/platform-react

> platform-react for rice

Latest version **1.0.1** (published 2019-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @arice/platform-react
pnpm add @arice/platform-react
yarn add @arice/platform-react
bun add @arice/platform-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-09-27 |
| First published | 2019-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | xiaoa |
| Maintainers | xiaoa |
| Keywords | micro-frontends, framework, react, llpage, iframe, sandbox, lifecycle, page |

## Links

- npm: https://www.npmjs.com/package/@arice/platform-react
- Repository: https://github.com/qddegtya/rice
- Homepage: https://github.com/qddegtya/rice#readme
- Issues: https://github.com/qddegtya/rice/issues
- npm.io page: https://npm.io/package/@arice/platform-react

## Dependencies (1)

- [xajs](https://npm.io/package/xajs.md) ^1.0.9

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-09-27
- 1.0.0 — 2019-09-25

## README

<h1 align="center">
  <br>
	<img width="128" src="media/logo.png" alt="Rice">
  <br>
  <br>
  <br>
</h1>

# About

> 📦 out-of-box micro-frontends solution

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)

- Full Documentation
  - [Motivation](./docs/motivation.md)
  - [Principle](./docs/principle.md)
  - [Runtime Core](./docs/runtime-core.md)
  - [x-view](./docs/x-view.md)
  - [x-sandbox](./docs/sandbox.md)

# Introduction

> 🍩 🎉 😊 Let's eat some food

### Runtime Core

#### Define App component with "sidecar"

```javascript
// index.js
import { connect } from "@arice/core";
import UserInfo from "./UserInfo";
import effects from "./effects";

function App({ dispatch, provide }) {
  provide('App')({
    openPage: page => {
      openPage(page)
    }
  });

  return <Layout>
    <UserInfo />
    <Footer onClick={() => dispatch('logout')}></Footer>
  </Layout>;
}

export default connect({ effects })(App);

// effects.js
export default ({ $, inject }) => {
  const service = inject({
    'userInfo': '@component/UserInfo'
  });

  $('logout').subscribe(() => {
    service.userInfo.logout();
  });
})
```

#### Define UserInfo component with "sidecar"

```javascript
// index.js
import { useState } from 'react';
import { connect } from "@arice/core";
import effects from "./effects";

function UserInfo({ dispatch, provide }) {
  const [user, setUser] = useState('');

  provide('UserInfo')({
    logout: () => {
      logoutService.call();
    }
  });

  return <div/>
    <span>{user}<span>
    <Link onClick={url => dispatch('openPage', url)} title="open user detail page" />
  </Link>;
}

export default connect({ effects })(UserInfo);

// effects.js
export default ({ $, inject }) => {
  const service = inject({
    'app': '@component/app'
  });

  $('logout').subscribe(() => {
    service.app.openPage();
  });
})
```

#### Start

```javascript
import Rice from "@arice/core";
import App from "./App.jsx";

const app = Rice();

app.load(() => <App />);

app.start("#container");
```

---
_Source: https://npm.io/package/@arice/platform-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._