From ea07a9beea969ae6a6c4adf3e3697ce8ff03964d Mon Sep 17 00:00:00 2001 From: Alexander Lelidis Date: Mon, 30 Sep 2019 17:09:34 +0200 Subject: [PATCH] Finish usable published version --- README.md | 17 +++++++++++++++++ example/index.html | 1 + package.json | 8 ++++---- src/index.jsx | 1 - webpack.common.js | 8 -------- webpack.prod.js | 4 ++-- 6 files changed, 24 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 302b538..5ff055c 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,23 @@ Then, just import to your React component: ```jsx import { MapillaryViewer } from 'react-mapillary'; ``` +### Stylesheets + +Add the required stylesheets. +``` +{/* The following line can be included in your src/index.js or App.js file*/} + +import 'mapillary-js/dist/mapillary.min.css'; +``` + +or + +The simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here. + +```html + + +``` ## Examples TBD diff --git a/example/index.html b/example/index.html index 5cba144..143fed8 100644 --- a/example/index.html +++ b/example/index.html @@ -4,6 +4,7 @@ react-mapillary +
diff --git a/package.json b/package.json index fd8727c..e85f6f9 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,12 @@ { "name": "react-mapillary", - "version": "0.0.1", + "version": "0.0.5", "description": "A react component for the mapillary-js lib", "main": "dist/react-mapillary.js", "module": "dist/react-mapillary.js", + "files": [ + "dist" + ], "scripts": { "start": "webpack-dev-server --config webpack.dev.js", "build": "webpack --config webpack.prod.js", @@ -36,18 +39,15 @@ "@babel/preset-react": "^7.0.0", "babel-eslint": "^10.0.3", "babel-loader": "^8.0.4", - "css-loader": "^3.2.0", "eslint": "^6.3.0", "eslint-config-airbnb": "^18.0.1", "eslint-loader": "^3.0.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.14.3", - "file-loader": "^4.2.0", "react": "^16.9.0", "react-dom": "^16.9.0", "react-test-renderer": "^15.6.2", - "style-loader": "^1.0.0", "webpack": "^4.39.3", "webpack-cli": "^3.3.8", "webpack-dev-server": "^3.8.0", diff --git a/src/index.jsx b/src/index.jsx index 2d7ab19..b24b603 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import * as Mapillary from 'mapillary-js'; -import 'mapillary-js/dist/mapillary.min.css'; class MapillaryViewer extends Component { componentDidMount() { diff --git a/webpack.common.js b/webpack.common.js index 02fac6f..5133feb 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -15,14 +15,6 @@ module.exports = { loader: 'babel-loader', exclude: /node_modules/, }, - { - test: /\.css$/, - use: ['style-loader', 'css-loader'], - }, - { - test: /.(jpg|jpeg|png|mp3|svg)$/, - use: ['file-loader'], - }, ], }, }; diff --git a/webpack.prod.js b/webpack.prod.js index f848dcc..bac48fb 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -9,8 +9,8 @@ module.exports = merge(common, { entry: './src/index.jsx', output: { path: path.join(__dirname, 'dist'), - filename: 'mappilary-react.js', - library: 'mappilary-react', + filename: 'react-mapillary.js', + library: 'react-mapillary', libraryTarget: 'umd', }, });