More Customizable Options

src/components/ComponentToImg.js

@@ -1,8 +1,6 @@
-import React from 'react';
+import React from "react";
 import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
-import './CoverImage.css'
+import "./CoverImage.css";
-
-
 
 class ComponentToImg extends React.Component {
 	constructor(props) {
@@ -12,25 +10,24 @@ class ComponentToImg extends React.Component {
 
 	render() {
 		console.log(this.props.children);
+		let downloadButton;
+		switch (this.props.downloadAs) {
+			case "PNG":
+				downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button>;
+				break;
+			case "JPEG":
+				downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef)}>Download</button>;
+		}
+		console.log(downloadButton);
 
 		return (
 			<React.Fragment>
-
+				<div ref={this.componentRef}>{this.props.children}</div>
-                <div ref={this.componentRef}>
+				{/* <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button> */}
-                    {this.props.children}
+				{downloadButton}
-                </div>
+			</React.Fragment>
-
+		);
-                    {/* <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
-                        Export As JPEG
-                    </button> */}
-
-                    <button onClick={() => exportComponentAsPNG(this.componentRef)}>
-                        Download
-                     </button>
-                
-            </React.Fragment>);
 	}
-
 }
 
 export default ComponentToImg;

src/components/ConfigCover.css

@@ -1,4 +1,6 @@
-body{background-color: #f2f2f2;}
+body {
+	background-color: #f2f2f2;
+}
 
 .main-container {
 	width: auto;
@@ -7,7 +9,9 @@ body{background-color: #f2f2f2;}
 	display: flex;
 	flex-direction: row;
 }
-.tagline{max-width: 300px;}
+.tagline {
+	max-width: 300px;
+}
 .inputData {
 	display: flex;
 	flex-direction: column;
@@ -18,8 +22,12 @@ body{background-color: #f2f2f2;}
 	display: flex;
 	flex-direction: column;
 }
-label{margin:5px;}
+label {
-input{margin:4px;}
+	margin: 5px;
+}
+input {
+	margin: 4px;
+}
 
 .inputTitle {
 	height: 40px;
@@ -28,10 +36,14 @@ input{margin:4px;}
 	padding-left: 20px;
 }
 
+.reset-btn {
+	background-color: #fc5c65;
+	margin-top: 10px;
+}
+
 @media screen and (max-width: 600px) {
 	.main-container {
 		display: flex;
 		flex-direction: column;
 	}
-
 }

src/components/ConfigCover.js

@@ -1,43 +1,90 @@
-import React from 'react';
+import React from "react";
-import './ConfigCover.css'
+import "./ConfigCover.css";
-import CoverImage from './CoverImage';
+import CoverImage from "./CoverImage";
-import ComponentToImg from './ComponentToImg';
+import ComponentToImg from "./ComponentToImg";
-import '../assets/css/patterns.css'
+
+const defaultSettings = {
+	title: "How I built my first project with react",
+	bgColor: "#00ff99",
+	borderColor: "#8c52ff",
+	borderSize: "18",
+	borderType: "solid",
+	pattern: "",
+	download: "PNG",
+	foregroundColor: "#ffffff",
+	textColor: "#676683",
+	opacity: 1,
+};
+
 class ConfigCover extends React.Component {
+	state = defaultSettings;
 
-    state = {
+	handleReset = () => {
-        title: 'How I built my first project with react',
+		this.setState(defaultSettings);
-        bgcolor: '',
-        border: '',
-        pattern: ''
-
 	};
 
 	render() {
 		return (
 			<div className="main-container">
-
 				<div className="inputData card">
-
 					<h1>CoverView</h1>
 					<p className="tagline">🛠 Create awesome cover images for your blog posts quickly</p>
-                    <input type="text" placeholder="Enter title here" className="inputTitle form-control"
+					<input
-                        onChange={e => this.setState({ title: e.target.value })}></input>
+						type="text"
-
+						placeholder="Enter title here"
+						className="inputTitle form-control"
+						onChange={(e) => this.setState({ title: e.target.value })}
+					></input>
 
 					<div>
 						<label>Background</label>
-                        <input type="color" defaultValue="#00ff99"
+						<input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} />
-                            onChange={e => this.setState({ bgcolor: e.target.value })} />
 
-                        <label>border</label>
+						<label>Border</label>
-                        <input type="color" defaultValue="#8c52ff"
+						<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} />
-                            onChange={e => this.setState({ border: e.target.value })} />
 					</div>
+					<div>
+						<label>Foreground</label>
+						<input
+							type="color"
+							value={this.state.foregroundColor}
+							onChange={(e) => this.setState({ foregroundColor: e.target.value })}
+						/>
+
+						<label>Text</label>
+						<input type="color" value={this.state.textColor} onChange={(e) => this.setState({ textColor: e.target.value })} />
+					</div>
+					<label>Opacity</label>
+					<input
+						type="range"
+						min="0"
+						max="1"
+						step="0.1"
+						value={this.state.opacity}
+						onChange={(e) => this.setState({ opacity: e.target.value })}
+					></input>
+					<label>Border size</label>
+					<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
+
+					<label>Border type</label>
+					<select
+						onChange={(e) => this.setState({ borderType: e.target.value })}
+						className="form-control"
+						value={this.state.borderType}
+					>
+						<option>dotted</option>
+						<option>dashed</option>
+						<option>solid</option>
+						<option>double</option>
+						<option>groove</option>
+						<option>ridge</option>
+						<option>inset</option>
+						<option>outset</option>
+						<option>none</option>
+					</select>
 
 					<label>Background Pattern</label>
-                    <select onChange={e => this.setState({ pattern: e.target.value })}
+					<select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}>
-                        className="form-control">
 						<option>None</option>
 						<option>graph-paper</option>
 						<option>jigsaw</option>
@@ -54,23 +101,23 @@ class ConfigCover extends React.Component {
 						<option>leaf</option>
 						<option>bubbles</option>
 						<option>squares</option>
-
+						<option>explorer</option>
+						<option>jupiter</option>
+						<option>sun</option>
 					</select>
-
+					<label>Dowload As</label>
+					<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control" value={this.state.download}>
+						<option>PNG</option>
+						<option>JPEG</option>
+					</select>
+					<button className="reset-btn" onClick={this.handleReset}>
+						Reset
+					</button>
 				</div>
-
 				<div className="blog-cover">
-                    <ComponentToImg>
+					<ComponentToImg downloadAs={this.state.download}>
-                        <CoverImage
+						<CoverImage {...this.state} />
-
-                            title={this.state.title}
-                            bgcolor={this.state.bgcolor}
-                            border={this.state.border}
-                            pattern={this.state.pattern}
-
-                        />
 					</ComponentToImg>
-
 				</div>
 			</div>
 		);

src/components/CoverImage.js

@@ -1,16 +1,33 @@
-import React from 'react';
+import React from "react";
-import './CoverImage.css';
+import "./CoverImage.css";
+import "../assets/css/patterns.css";
 
 class CoverImage extends React.Component {
+	hexToRgbA(hex, opacity) {
+		var c;
+		if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+			c = hex.substring(1).split("");
+			if (c.length == 3) {
+				c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+			}
+			c = "0x" + c.join("");
+			return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
+		}
+		throw new Error("Bad Hex");
+	}
 
 	render() {
+		const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity } = this.props;
+		const styleToApply = {
+			borderTop: `${borderSize}px ${borderType} ${borderColor}`,
+			backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
+			color: `${textColor}`,
+		};
 		return (
-            <div className={` cover ${this.props.pattern} `}
+			<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
-                style={{ backgroundColor: this.props.bgcolor }}>
+				<div className={`${pattern}`}>
-                <div className={`${this.props.pattern}`}>
+					<div className="title-card" style={styleToApply}>
-                    <div className="title-card"
+						<p>{title}</p>
-                        style={{ borderTop: `18px solid ${this.props.border}` }}>
-                        <p>{this.props.title}</p>
 					</div>
 				</div>
 			</div>