styled-react-modal - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "styled-react-modal",
-  "version": "0.1.0",
-  "description": "An easy to use modal component for React that uses styled-components.",
-  "main": "index.js",
+  "version": "0.1.1",
+  "description": "A modal component for React built with styled-components.",
+  "main": "build/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack --watch",
+    "build": "webpack"
   },
@@ -23,3 +25,16 @@ "repository": {
   },
-  "homepage": "https://github.com/AlexanderRichey/styled-react-modal#readme"
+  "homepage": "https://github.com/AlexanderRichey/styled-react-modal#readme",
+  "peerDependencies": {
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
+    "styled-components": "^3.2.5"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "webpack": "^4.4.1",
+    "webpack-cli": "^2.0.13"
+  }
 }

readme.md

@@ -1,1 +0,204 @@
-Coming soon
+# Styled React Modal
+
+[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![npm version](https://img.shields.io/npm/v/styled-react-modal.svg)](https://img.shields.io/npm/v/standard.svg) [![npm downloads](https://img.shields.io/npm/dm/styled-react-modal.svg)](https://www.npmjs.com/package/styled-react-modal)
+
+Styled React Modal is a modal implementation built with styled-components. It uses the latest React 16.x features and exposes a familiar, easy to use API.
+
+## Install
+
+```
+npm i -s styled-react-modal
+```
+
+## Usage
+
+Add the `<ModalProvider>` component near the top of your application's tree.
+
+```js
+import React, { Component } from 'react'
+import { ModalProvider } from 'styled-react-modal'
+...
+
+export default class App extends Component {
+  render () {
+    return (
+      <ThemeProvider theme={theme}>
+        <ModalProvider>
+          <FancyModalButton />
+        </ModalProvider>
+      </ThemeProvider>
+    )
+  }
+}
+```
+
+Use the `<Modal>` component.
+
+```js
+import Modal from 'styled-react-modal'
+...
+
+const StyledModal = Modal.styled`
+  width: 20rem;
+  height: 20rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => props.theme.colors.white};
+`
+
+class FancyModalButton extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: false,
+    }
+
+    this.toggleModal = this.toggleModal.bind(this)
+  }
+
+  toggleModal (e) {
+    this.setState({ isOpen: !this.state.isOpen })
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={this.toggleModal}>Click me</button>
+        <StyledModal
+          isOpen={this.state.isOpen}
+          onBackgroundClick={this.toggleModal}
+          onEscapeKeydown={this.toggleModal}>
+          <span>I am a modal!</span>
+          <button onClick={this.toggleModal}>Close me</button>
+        </StyledModal>
+      </div>
+    )
+  }
+}
+
+```
+
+# API
+
+#### Top-Level Exports
+- `<ModalProvider>`
+- `Modal` (Default)
+  - `Modal.styled(styles)`
+  - `<Modal>`
+- `<BaseModalBackground>`
+
+### `<ModalProvider>`
+
+Sets the root portal where `<Modal>`s will be rendered.
+
+**Props**
+
+- [`backgroundComponent`] (Component): A styled component to be used as the default modal background. If not provided, library defaults will be used.
+
+*Example:*
+
+```js
+import { ModalProvider } from 'styled-react-modal'
+
+const SpecialModalBackground = styled.div`
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 30;
+  background-color: green;
+`
+
+export default class App extends Component {
+  render () {
+    return (
+      <ThemeProvider theme={theme}>
+        <ModalProvider backgroundComponent={SpecialModalBackground}>
+          <FancyModalButton />
+        </ModalProvider>
+      </ThemeProvider>
+    )
+  }
+}
+```
+
+### `Modal.styled(styles)`
+
+Factory method that accepts a tagged template literal and returns a `<Modal>` component with styles included.
+
+**Arguments**
+
+ - `styles` (Tagged Template Literal): styled-components compatible css styles.
+
+*Example:*
+
+```js
+const StyledModal = Modal.styled`
+  width: 20rem;
+  height: 20rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => props.theme.colors.white};
+`
+```
+
+### `<Modal>`
+
+Renders its children in a modal when open, nothing when not open.
+
+**Props**
+
+- `isOpen` (Boolean): A boolean that indicates whether the modal is to be open or closed.
+- [`onBackgroundClick`] (Function): A function that is called when the modal background is clicked.
+- [`onEscapeKeydown`] (Function): A function that is called when the escape key is pressed while the modal is open.
+
+*Example:*
+
+```js
+import Modal from 'styled-react-modal'
+
+class FancyModalButton extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: false,
+    }
+
+    this.toggleModal = this.toggleModal.bind(this)
+  }
+
+  toggleModal (e) {
+    this.setState({ isOpen: !this.state.isOpen })
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={this.toggleModal}>Click me</button>
+        <Modal isOpen={this.state.isOpen}>
+          <span>I am a modal!</span>
+          <button onClick={this.toggleModal}>Close me</button>
+        </Modal>
+      </div>
+    )
+  }
+}
+```
+
+### `<BaseModalBackground>`
+
+A convenience base component for making default background styles with `<ModalProvider>`.
+
+*Example:*
+
+```js
+const SpecialModalBackground = styled(BaseModalBackground)`
+  background-color: green;
+`
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15268

increased by2023.5%

Number of package files

9

increased by200%

Lines of code

182

increased by18100%

Number of lines in readme file

205

increased by10150%

Worsened metrics

Dependency count

3

increased byInfinity%

Dev dependency count

6

increased byInfinity%

Number of low quality alerts

3

increased by50%

No dependency changes