first commit

Author: rwieruch

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

.gitignore

@@ -0,0 +1,6 @@
+logfile
+
+.env
+
+node_modules/
+lib/

.npmignore

@@ -0,0 +1,2 @@
+src/
+test/

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 70,
+}

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+
+node_js:
+  - stable
+
+install:
+  - npm install
+
+script:
+  - npm run test
+
+after_script:
+  - npm run coverage

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Robin Wieruch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,58 @@
+# useCustomElement React Hook
+
+[![Build Status](https://travis-ci.org/the-road-to-learn-react/use-custom-element.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/use-custom-element) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-learn-react/use-custom-element.svg)](https://greenkeeper.io/) [![Coverage Status](https://coveralls.io/repos/github/the-road-to-learn-react/use-custom-element/badge.svg?branch=master)](https://coveralls.io/github/the-road-to-learn-react/use-custom-element?branch=master) ![NPM](https://img.shields.io/npm/l/use-custom-element.svg)
+
+Custom hook to bridge Custom Elements (Web Components) to React.
+
+## Installation
+
+`npm install use-custom-element`
+
+## Usage
+
+In this scenario, we are using a specific [Dropdown Web Component](https://github.com/rwieruch/web-components-dropdown) as a React Dropdown Component. By using the custom React hook, we can provide all props in the right format to the custom element and register all event listeners (e.g. onChange from `props`) behind the scenes.
+
+```
+import React from 'react';
+
+// Web Component Use Case
+// install via npm install road-dropdown
+import 'road-dropdown';
+
+import customElementProps from 'use-custom-element';
+
+const Dropdown = props => {
+  const [customElementProps, ref] = useCustomElement(props);
+
+  return <road-dropdown {...customElementProps} ref={ref} />;
+};
+```
+
+Afterward, the Dropdown component can be used:
+
+```
+const props = {
+  label: 'Label',
+  option: 'option1',
+  options: {
+    option1: { label: 'Option 1' },
+    option2: { label: 'Option 2' },
+  },
+  onChange: (value) => console.log(value),
+};
+
+return <Dropdown {...props} />;
+```
+
+## Contribute
+
+* `git clone git@github.com:the-road-to-learn-react/use-custom-element.git`
+* `cd use-custom-element`
+* `npm install`
+* `npm run test`
+
+### More
+
+* [Publishing a Node Package to NPM](https://www.robinwieruch.de/publish-npm-package-node/)
+* [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)
+* [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)