v0.1.0

aragon · Feb 27, 2020 · c6d12b0 · c6d12b0
commit c6d12b0
Show file tree

Hide file tree

Showing 14 changed files with 9,500 additions and 0 deletions.
diff --git a/.babelrc.json b/.babelrc.json
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 2%, not dead, not ie > 0",
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,45 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'standard',
+    'standard-react',
+    'prettier/react',
+    'plugin:prettier/recommended',
+  ],
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+  plugins: ['prettier', 'react', 'react-hooks'],
+  rules: {
+    'react/prop-types': 'warn',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    'import/no-unresolved': [
+      'error',
+      { ignore: ['^react(-dom)?$', '^styled-components$'] },
+    ],
+    'promise/no-nesting': ['off'],
+    'linebreak-style': ['error', 'unix'],
+    curly: 'error',
+  },
+  settings: {
+    react: {
+      pragma: 'React',
+      version: '16.6',
+    },
+  },
+  overrides: [
+    {
+      files: ['**/*.test.js'],
+      env: { jest: true },
+    },
+  ],
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+.cache/
+dist/
+yarn-error.log
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,66 @@
+# 🔬 useInside()
+
+[<img src="https://img.shields.io/npm/v/use-inside" alt="" />](https://www.npmjs.com/package/use-inside) [<img src="https://img.shields.io/bundlephobia/minzip/use-inside" alt="" />](https://bundlephobia.com/result?p=use-inside)
+
+useInside() allows a component to be aware if its "inside" the subtree of another component and receive data from it, in the most straightforward, simple way possible.
+
+## Usage
+
+Add it to your project:
+
+```console
+yarn add use-inside
+```
+
+Use it in your React app:
+
+```jsx
+// App.js
+
+import React from 'react'
+import { Inside, useInside } from 'use-inside'
+
+function App() {
+
+  return (
+    <>
+      <h1>useInside</h1>
+      <Inside name="papaya" data={{backgroundColor: 'papayawhip'}}>
+        <Greeting />
+      </Inside>
+    </>
+  )
+}
+
+function Greeting() {
+  const [inside, data] = useInside('papaya')
+
+  return <h2 style={{..data}}>{inside && 'papaya'}</h2>
+}
+
+export default App
+```
+
+## API
+
+### &lt;Inside />
+
+This is the provider component. It should be placed above any component using `useInside()`. Apart from `children`, it accepts two other props:
+
+#### name (required)
+
+The name of the inside context. Required for storing the context into a map for later retrieval.
+
+#### data
+
+The data passed to the component using `useInside()`. Accepts any type.
+
+### useInside()
+
+This is the hook to be used throughout the app.
+
+It takes a string as a single required param, and returns an array containing the following:
+
+- `inside`: A `boolean` that will be `true` if the component is in the subtree of the provider
+  `Inside` component.
+- `data`: The data passed through the `Inside` component.
diff --git a/examples/simple-inside/.babelrc b/examples/simple-inside/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 2%, not dead, not ie > 0",
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}
diff --git a/examples/simple-inside/index.html b/examples/simple-inside/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/simple-inside/index.js b/examples/simple-inside/index.js
@@ -0,0 +1,65 @@
+import 'babel-polyfill'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import { Inside, useInside } from 'use-inside'
+
+function Card({ insideName }) {
+  const [inside, data] = useInside(insideName)
+  return (
+    <div
+      style={{
+        width: '300px',
+        height: '200px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...data,
+      }}
+    >
+      <h2>{inside && insideName}</h2>
+    </div>
+  )
+}
+
+Card.propTypes = {
+  insideName: PropTypes.string.isRequired,
+}
+
+function App() {
+  return (
+    <>
+      <h1>use-inside</h1>
+      <Inside name="Card:red" data={{ backgroundColor: 'red' }}>
+        <Card insideName="Card:red" />
+      </Inside>
+      <Inside
+        name="Card:blue"
+        data={{ backgroundColor: 'blue', marginTop: '24px' }}
+      >
+        <Card insideName="Card:blue" />
+      </Inside>
+    </>
+  )
+}
+
+ReactDOM.render(
+  <>
+    <App />
+    <style>
+      {`
+        body {
+          width: 40rem;
+          margin: 0 auto;
+          font-family: sans-serif;
+          font-size: 18px;
+          line-height: 1.5;
+        }
+        h1 {
+          font-weight: 400;
+        }
+      `}
+    </style>
+  </>,
+  document.querySelector('#app')
+)
diff --git a/examples/simple-inside/package.json b/examples/simple-inside/package.json
@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "start": "parcel serve index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "use-inside": "link:../.."
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.3",
+    "parcel": "^1.12.4"
+  }
+}