Skip to content
This repository has been archived by the owner on Mar 23, 2021. It is now read-only.

Commit

Permalink
New: React Flyweight (Initial Commit)
Browse files Browse the repository at this point in the history
  • Loading branch information
omgaz committed Nov 12, 2017
1 parent ee6abe9 commit 42fe0e1
Show file tree
Hide file tree
Showing 7 changed files with 3,309 additions and 1 deletion.
7 changes: 7 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"presets": ["env"],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx"
]
}
41 changes: 40 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,40 @@
# react-flyweight
# React Flyweight Container

Simple, lightweight flyweight container for your react apps.
Clean up those `onClicks`.

`~1kb`, awesome.

### Usage

```bash
npm i --save react-flyweight
```

```diff
import React from 'react';
import { render } from 'react-dom';
import PropTypes from 'prop-types';
+ import FlyweightContainer from 'react-flyweight';

const arr = [];

- const add = (idToAdd) => {
- arr.push(elData.id);
- }
+ const onClickHandler = (elData) => {
+ // decide what to do on click here
+ if(elData.action === 'add') { arr.push(elData.id); }
+ }

const App = () => (
+ <FlyweightContainer onClickDispatcher={onClickHandler}>
- <button onClick={() => add(1);}>Add</button>
- <button onClick={() => add(2);}>Add</button>
+ <button data-action="add" data-id={1}>Add</button>
+ <button data-action="add" data-id={2}>Add</button>
+ </FlyweightContainer>
);

render(<App />, document.getElementById('root'));
```
1 change: 1 addition & 0 deletions build/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 42fe0e1

Please sign in to comment.