react-native-photo-guideline-grid - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

@@ -0,5 +1,30 @@
+/**
+ *  Copyright (c) 2016 BAM
+ *  This source code is licensed under the MIT license found in the
+ *  LICENSE file in the root directory of this source tree.
+ * 
+ *  @providesModule PhotoGuidelineGuide
+ *  @Flow
+ * */
+
 import React, {Component} from 'react';
 import {View} from 'react-native';
 
-const absoluteFill = {
+type AbsoluteFill = {
+  position: string;
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+}
+
+type BlockStyle = {
+  borderColor: string;
+  borderBottomWidth?: number;
+  borderRightWidth?: number;
+}
+
+export type Direction = 'row' | 'column';
+
+const absoluteFill : AbsoluteFill = {
   position: 'absolute',
@@ -12,10 +37,9 @@ top: 0,
 
-export default class PhotoGrid extends Component {
-  renderGrid = (direction) => {
-    const blockStyle = direction === 'row'
-      ? {borderColor: 'white', borderRightWidth: 1}
-      : {borderColor: 'white', borderBottomWidth: 1};
+export const Lines = (direction : Direction, color) => (
+  const blockStyle: BlockStyle = (direction === 'row')
+      ? {borderColor: color, borderRightWidth: 1}
+      : {borderColor: color, borderBottomWidth: 1};
 
-    return (
-      <View
+  return (
+    <View
         style={{
@@ -31,13 +55,14 @@ ...absoluteFill,
       </View>
-    );
-  }
+  );
+);
 
-  render() {
+export const PhotoGrid = (color: string = 'white') => (
     return (
       <View style={absoluteFill} pointerEvents="none">
-        {this.renderGrid('row')}
-        {this.renderGrid('column')}
+        <Lines direction="row" color={color} />
+        <Lines direction="column" color={color} />
       </View>
     );
-  }
-}
+)
+
+export default PhotoGrid;

package.json

 {
   "name": "react-native-photo-guideline-grid",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A simple component to display a guideline grid according to Rule of thirds",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-photo-guideline-grid
 
-A simple component to display a guideline grid according to Rule of thirds
+A simple component to display a guideline grid according to Rule of thirds.
 
+![Screenshot of the guideline grid](https://raw.githubusercontent.com/bamlab/react-native-photo-guideline-grid/master/doc/screenshot.png "Screenshot of the guideline grid")
+
 ## Usage
 
-```
+```shell
 npm install react-native-photo-guideline-grid --save
@@ -13,3 +15,3 @@ ```
 
-```
+```js
 import PhotoGuidelineGrid from 'react-native-photo-guideline-grid';
@@ -16,0 +18,0 @@

No alert changes

Improved metrics

Total package byte prevSize

695861

increased by18461.24%

Number of package files

7

increased by40%

Lines of code

57

increased by54.05%

Number of lines in readme file

31

increased by6.9%

No dependency changes