Skip to content

Commit f57be6a

Browse files
MacilMacil
committed
Initial working commit.
1 parent f0f80b6 commit f57be6a

17 files changed

+6687
-0
lines changed

‎.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-flow"
5+
],
6+
"plugins": [
7+
"@babel/plugin-proposal-class-properties",
8+
"@babel/plugin-transform-runtime"
9+
]
10+
}

‎.circleci/config.yml

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
version: 2
2+
jobs:
3+
build:
4+
docker:
5+
- image: circleci/node:8
6+
steps:
7+
- checkout
8+
- restore_cache:
9+
name: Restore Yarn Package Cache
10+
keys:
11+
- yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}
12+
- yarn-packages-{{ .Branch }}
13+
- yarn-packages-master
14+
- yarn-packages-
15+
- run:
16+
name: Prepare Greenkeeper
17+
command: |
18+
echo 'export PATH=$(yarn global bin):$PATH' >> "$BASH_ENV"
19+
source "$BASH_ENV"
20+
yarn global add greenkeeper-lockfile@1
21+
- run:
22+
name: Install Dependencies
23+
command: yarn install
24+
- save_cache:
25+
name: Save Yarn Package Cache
26+
key: yarn-packages-{{ .Branch }}-{{ checksum "yarn.lock" }}
27+
paths:
28+
- node_modules/
29+
- ~/.yarn/bin/
30+
- ~/.config/yarn/global/
31+
- ~/.cache/yarn
32+
- run: greenkeeper-lockfile-update
33+
- run: yarn test
34+
- run: greenkeeper-lockfile-upload

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
trim_trailing_whitespace = true
7+
8+
indent_style = space
9+
indent_size = 2

‎.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/flow-typed
2+
/js

‎.eslintrc.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
module.exports = {
2+
"parser": "babel-eslint",
3+
"env": {
4+
"jest": true,
5+
"es6": true
6+
},
7+
"extends": ["eslint:recommended"],
8+
"parserOptions": {
9+
"ecmaFeatures": {
10+
},
11+
"sourceType": "module"
12+
},
13+
"plugins": [
14+
"flowtype"
15+
],
16+
"rules": {
17+
"flowtype/define-flow-type": 1,
18+
"flowtype/require-valid-file-annotation": ["error", "always"],
19+
20+
"indent": ["error", 2],
21+
"linebreak-style": ["error", "unix"],
22+
"quotes": ["error", "single", "avoid-escape"],
23+
"semi": ["error", "always"],
24+
"no-var": ["error"],
25+
"brace-style": ["error"],
26+
"array-bracket-spacing": ["error", "never"],
27+
"block-spacing": ["error", "always"],
28+
"no-spaced-func": ["error"],
29+
"no-whitespace-before-property": ["error"],
30+
"space-before-blocks": ["error", "always"],
31+
"keyword-spacing": ["error"]
32+
}
33+
};

‎.flowconfig

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
[ignore]
2+
3+
[include]
4+
5+
[libs]
6+
7+
[options]

‎.npmignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
*~
2+
.DS_Store
3+
/node_modules
4+
npm-debug.log
5+
/flow-typed
6+
/src
7+
__tests__
8+
*.test.*
9+
/yarn.lock
10+
/.circleci
11+
.babelrc

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## 1.0.0 (2018-11-01)
2+
3+
Initial release.

‎LICENSE.txt

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2018 Chris Cowan <agentme49@gmail.com>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# react-multi-ref
2+
3+
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Macil/react-multi-ref/blob/master/LICENSE.txt) [![npm version](https://img.shields.io/npm/v/react-multi-ref.svg?style=flat)](https://www.npmjs.com/package/react-multi-ref) [![CircleCI Status](https://circleci.com/gh/Macil/react-multi-ref.svg?style=shield)](https://circleci.com/gh/Macil/react-multi-ref) [![Greenkeeper badge](https://badges.greenkeeper.io/Macil/react-multi-ref.svg)](https://greenkeeper.io/)
4+
5+
This is a small utility to make it easy for React components to deal with refs
6+
on multiple dynamically created elements.
7+
8+
The following example code assumes that you're using either Babel with the
9+
"babel/plugin-proposal-class-properties" plugin active or TypeScript.
10+
11+
```js
12+
import React from 'react';
13+
import MultiRef from 'react-multi-ref';
14+
15+
class Foo extends React.Component {
16+
_items = new MultiRef();
17+
18+
render() {
19+
// Make a 5-item array of divs with keys 0,1,2,3,4
20+
const items = new Array(5).fill(null).map((n, i) =>
21+
<div key={i}>
22+
<input type="text" ref={this._items.ref(i)} />
23+
</div>
24+
);
25+
return (
26+
<div>
27+
<button onClick={this._onClick}>Alert</button>
28+
{ items }
29+
</div>
30+
);
31+
}
32+
33+
_onClick = () => {
34+
const parts = [];
35+
this._items.map.forEach(input => {
36+
parts.push(input.value)
37+
});
38+
alert('all inputs: ' + parts.join(', '));
39+
};
40+
}
41+
```
42+
43+
The `multiRef.map` property is a Map object containing entries where the key is
44+
the parameter passed to `multiRef.ref(key)` and the value is the ref element
45+
given by React.
46+
47+
Multiple calls to `multiRef.ref(key)` with the same key return the same value
48+
so that React knows that it doesn't need to update the ref.
49+
50+
This relies on Map being available globally. A global polyfill such as
51+
[Babel's polyfill](https://babeljs.io/docs/en/babel-polyfill/) is required to
52+
support older browsers that don't implement these.
53+
54+
## Types
55+
56+
Both [TypeScript](https://www.typescriptlang.org/) and
57+
[Flow](https://flowtype.org/) type definitions for this module are included!
58+
The type definitions won't require any configuration to use.

0 commit comments

Comments
 (0)