Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benadamstyles/reason-pure-component
A PureComponent implementation for ReasonReact
https://github.com/benadamstyles/reason-pure-component
purecomponent react reason reason-react reasonml
Last synced: 30 days ago
JSON representation
A PureComponent implementation for ReasonReact
- Host: GitHub
- URL: https://github.com/benadamstyles/reason-pure-component
- Owner: benadamstyles
- Created: 2019-02-12T15:23:41.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-14T16:11:13.000Z (over 5 years ago)
- Last Synced: 2024-08-09T07:45:43.481Z (3 months ago)
- Topics: purecomponent, react, reason, reason-react, reasonml
- Language: OCaml
- Size: 271 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# reason-pure-component
A PureComponent implementation for ReasonReact. Simplify your `shouldUpdate`!
## Installation
```sh
npm install reason-pure-component
```
**`bsconfig.json`:**
```diff
"bs-dependencies": [
"reason-react",
+ "reason-pure-component"
]
```
## Usage
Using reason-pure-component doesn't result in fewer lines of code, necessarily. The benefit is in the abstraction of how you compare `oldSelf.retainedProps` and `newSelf.retainedProps`. You simply define an equality function – in this case `==` . Thanks to the OCaml type system, if you forget to define any of the required configuration, the program will not compile – whereas if you use `ReasonReact.statelessComponentWithRetainedProps` directly, and forget to define `shouldUpdate`, no one is any the wiser.
```diff
+ module Config = {
type retainedProps = {
view: string,
subview: option(string),
};
+ let name = "Breadcrumb";
+ let equals = (==);
+ };
- let component =
- ReasonReact.statelessComponentWithRetainedProps(
- "Breadcrumb"
- );
+ module Pure = PureComponent.Stateless(Config);
let make = (~view, ~subview=?, _children) => {
- ...component,
+ ...Pure.component,
- retainedProps: {view, subview},
+ retainedProps: Config.{view, subview},
- shouldUpdate: (oldAndNewSelf) =>
- oldAndNewSelf.oldSelf.retainedProps !=
- oldAndNewSelf.newSelf.retainedProps,
render: _ =>
{ReasonReact.string(view)}
{ReasonReact.string(
subview->Belt.Option.getWithDefault("")
)}
,
};
```
## Known issues
### [genType](https://github.com/cristianoc/genType) compatibility
**genType** assumes your component exports its `component` record. Therefore, in the above example, you need to add the following line:
```reason
let component = Pure.component;
```