https://github.com/bloodyowl/rescript-react-compat
An alternative upgrade path for ReasonReact
https://github.com/bloodyowl/rescript-react-compat
compatibility-wrapper react reason-react reasonml
Last synced: 10 months ago
JSON representation
An alternative upgrade path for ReasonReact
- Host: GitHub
- URL: https://github.com/bloodyowl/rescript-react-compat
- Owner: bloodyowl
- License: mit
- Created: 2019-04-18T08:17:07.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2023-08-18T16:09:23.000Z (over 2 years ago)
- Last Synced: 2024-04-14T08:44:32.630Z (almost 2 years ago)
- Topics: compatibility-wrapper, react, reason-react, reasonml
- Language: ReScript
- Size: 54.7 KB
- Stars: 17
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- Funding: .github/FUNDING.yml
- License: MIT-LICENSE
Awesome Lists containing this project
README
# rescript-react-compat
> An alternative upgrade path for ReasonReact
## Installation
```console
$ yarn add rescript-react-compat
```
or
```console
$ npm install --save rescript-react-compat
```
Then add `rescript-react-compat` to your `bsconfig.json` `bs-dependencies` field.
## ReactCompat.useRecordApi
Enables you to wrap your existing `ReasonReact.statelessComponent` and `ReasonReact.reducerComponent` through a React hook.
```reason
[@react.component]
let make = () => {
ReactCompat.useRecordApi({
...ReactCompat.component,
render: _ =>
"Helloworld!"->ReasonReact.string
})
}
```
### Upgrade path
#### Stateless components
For implementation files (`.re`)
```diff
-let component = ReasonReact.statelessComponent("MyComponent");
+[@react.component]
- let make = _ => {
+ let make = () => {
+ ReactCompat.useRecordApi(
{
- ...component,
+ ...ReactCompat.component,
render: _ =>
"Helloworld!"->ReasonReact.string
}
+ )
}
```
For interface files (`.rei`)
```diff
+[@react.component]
- let make = 'a =>
+ let make = unit =>
- ReasonReact.component(
- ReasonReact.stateless,
- ReasonReact.noRetainedProps,
- ReasonReact.actionless
- );
+ React.element;
```
#### Reducer components
For implementation files (`.re`)
```diff
type action = | Tick;
type state = {count: int};
-let component = ReasonReact.reducerComponent("MyComponent");
+[@react.component]
- let make = _ => {
+ let make = () => {
+ ReactCompat.useRecordApi(
{
- ...component,
+ ...ReactCompat.component,
/* some lifecycle */
render: _ =>
"Helloworld!"->ReasonReact.string
}
+ )
}
```
You'll also need to rename:
- `ReasonReact.Update` -> `Update`
- `ReasonReact.UpdateWithSideEffects` -> `UpdateWithSideEffects`
- `ReasonReact.SideEffects` -> `SideEffects`
- `ReasonReact.NoUpdate` -> `NoUpdate`
For interface files (`.rei`)
```diff
-type state;
-type action;
+[@react.component]
- let make = 'a =>
+ let make = unit =>
- ReasonReact.component(
- state,
- ReasonReact.noRetainedProps,
- action
- );
+ React.element;
```
## Acknowledgments
Thnks @rickyvetter for the original idea and help through the process