React Signature

index.html

<div id="root"></div>

react-signature.markdown

React Signature

A Pen by Mufaddal on CodePen.

License.

script.babel

class Signature extends React.Component {

    state = {
        copySuccess: false,
        copyText : 'Copy to Clipboard',
        fullName: 'John Doe',
        jobTitle: 'UX Technologist',
        mobile: '55 123 4567',
        hideMobile: false
    }

    Copy = (e) => {
        new ClipboardJS('.button');
        this.setState({
            copyText: 'Signature Copied!',
            copySuccess: true
        })
        window.getSelection().removeAllRanges();
        setTimeout((e)=>{
            this.setState({
                copyText : 'Copy to Clipboard',
                copySuccess: false
            })
        },10000)
    }

    NameChange = (e) => {
        this.setState({
            fullName: e.target.value
        })
    }

    JobTitleChange = (e) => {
        this.setState({
            jobTitle: e.target.value
        })
    }

    MobileChange = (e) => {
        this.setState({
            mobile: e.target.value
        })
    }
    
    hideMobileCheckbox = () => {
        this.setState({
            hideMobile: !this.state.hideMobile
        })
    }

    componentDidMount(){
        new ClipboardJS('.button');
    }
  
    render(){
        return(
            <div className="wrapper">
                
                <div>
                    <div>
                        <h1>RBBi Signature Generator</h1>
                    </div>
                    <div>
                        <label>Full Name</label>
                        <input type="text" placeholder={this.state.fullName} onChange={this.NameChange} className="form-control" />
                    </div>
                    <div>
                        <label>Job Title</label>
                        <input type="text" placeholder={this.state.jobTitle} onChange={this.JobTitleChange} className="form-control" />
                    </div>
                    {
                        this.state.hideMobile ? null : (
                            <div>
                                <label>Mobile</label>
                                <div className="mobile"><NumberFormat format="## ### ####" placeholder={this.state.mobile} onChange={this.MobileChange} className="form-control" /></div>
                            </div>
                        )
                    }
                    
                    <div>
                        <label className="custom-checkbox">If you wish to hide mobile no.
                            <input type="checkbox" name="hide_mobile" value="mobile" onChange={this.hideMobileCheckbox}/>
                            <span className="checkmark"></span>
                        </label>
                    </div>
                    <br />
                    
                    <br />
                    <div className="signature__wrapper">
                        <div id="CopyToClipboard">
                            <table>
                                <tbody>
                                    <tr>
                                        <td style={{ verticalAlign: 'top' }}>
                                            <img src="http://rbbideas.com/etc/email/rbbi-logo-solid.jpg" alt="red blue blur ideas (RBBideas)" width="60" height="60" align="left" style={{ fontFamily: "Times", marginRight: '18px', marginTop: '7px' }} />
                                        </td>
                                        <td style={{ verticalAlign: 'top', fontFamily: 'Arial, Helvetica, sans-serif', lineHeight: '1.8' }}>
                                            <font style={{ color: '#222222', fontWeight: 'bold', fontSize: '16px' }}>{this.state.fullName}</font>
                                            <font style={{ fontSize: '12px', color: '#666666', verticalAlign: 'middle' }}> | {this.state.jobTitle}</font>
                                            <font style={{ color: '#666666', display: 'block', fontWeight: 'bold', fontSize: '12px' }}>Red Blue Blur Ideas (RBBi)</font>
                                            <font style={{ color: '#666666', fontSize: '11px', display: 'block' }}>1406 JBC3, Cluster Y, Jumeirah Lake Towers (JLT) Dubai, UAE</font>
                                            <font style={{ color: '#666666', fontSize: '11px', display: 'block' }}>Tel: <a href="+971 4454 2608" style={{ color: '#666666', fontSize: '11px', textDecoration: 'none' }}>+971 4454 2608</a>
                                            {
                                                    this.state.hideMobile ? null : <span> | Mobile: <a href={`tel:+971 ${this.state.mobile}`} style={{ color: '#666666', fontSize: '11px', textDecoration: 'none' }}>+971 {this.state.mobile}</a></span>
                                            }
                                            </font>
                                            <font style={{ fontSize: '11px', color: '#666666', display: 'block' }}>
                                                <a href="https://rbbideas.com/" target="_blank" rel="noopener noreferrer" style={{ color: 'rgb(102, 102, 102)' }}>rbbideas.com</a>
                                            </font>
                                            <a href="https://twitter.com/RBBideas" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block' }}>
                                                <img src="https://rbbideas.com/etc/email/twitter.png" alt="twitter" width="20" height="20" hspace="4" vspace="8" align="left" />
                                            </a>
                                            <a href="https://facebook.com/RBBideas" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block' }}>
                                                <img src="https://rbbideas.com/etc/email/facebook.png" alt="facebook" width="20" height="20" hspace="4" vspace="8" align="left" />
                                            </a>
                                            <a href="https://www.linkedin.com/company/2330524/" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-block' }}>
                                                <img src="https://rbbideas.com/etc/email/linkedin.png" alt="linkedin" width="20" height="20" hspace="4" vspace="8" align="left" />
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <br />
                    
                    <button className={`button ${this.state.copySuccess ? 'active' : ''}`} onClick={this.Copy} data-clipboard-target="#CopyToClipboard">{this.state.copyText}</button>

                    {
                        this.state.copySuccess ? (
                            <div className="success">
                                Copied! You can now paste in your favourite email signature app or browser signature settings.
                            </div>
                        ): null
                    }
                    
                </div>
            </div>
        )
    }
}

ReactDOM.render(
  <Signature/>,
  document.getElementById('root')
);

scripts

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="https://rawcdn.githack.com/s-yadav/react-number-format/master/dist/react-number-format.js"></script>
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.4.0/umd/react-dom.production.min.js"></script>

style.scss

*, *:before, *:after {
  box-sizing: border-box;
}

body {
    background: #f5f5f5;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #cecece;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #cecece;
}

h1 { 
    color: #7c795d; 
    font-family: 'Helvetica Neue', sans-serif; 
    font-size: 2rem; 
    font-weight: bold; 
    letter-spacing: -1px; 
    line-height: 1; 
    text-align: center; 
    margin:0 0 2rem;
}

.wrapper {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    border: 1px solid #ddd;
    padding: 2rem;
    display: flex;
}

.button {
    font-size: 1rem;
    display: block;
    padding: 12px 10px;
    margin: 20px auto 0;
    color: #fff;
    cursor: pointer;
    width: 70%;
    text-decoration: none;
    text-align: center;
    position: relative;
    transition: color 0.5s, border 0.5s;
    border-radius: 6px;
    border: solid 1px #555;
    background: #555;
    outline: none;
    &.active {
        background: #d60438;
        border-color: #d60438;
        text-transform: uppercase;
    }
}


.success {
    color: #3c763d;
    background: #dff0d8;
    border-color: #d6e9c6;
    padding:1rem;
    margin-top: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    margin-bottom: 1.5rem;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    box-shadow: inset 0 0 3px rgba(0,0,0,.15), 0 0 3px rgba(0,0,0,.1);
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

hr {
    border:none;
    border-top: solid 1px #ccc;
}

label {
    margin-bottom: 5px;
    display: inline-block;
    color: #777;
}

.mobile {
    position: relative;
}

.mobile:before {
    content: '+971';
    position: absolute;
    left: 10px;
    top: 10px;
    color: #666;
    pointer-events: none;
    
}

.mobile .form-control {
    padding-left: 56px;
}

.signature__wrapper {
    border:dashed 2px #e0a6a6;
    /* background: #fff7f7; */
    padding: 1rem;
    
}

/* ===================================
            CUSTOM CHECKBOX 
====================================== */
/* Customize the label (the container) */
.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 38px;
  padding-top: 5px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.custom-checkbox label {
    cursor: pointer;
}

/* Hide the browser's default checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border:1px solid #ced4da;
    box-shadow: inset 0 0 3px rgba(0,0,0,.15), 0 0 3px rgba(0,0,0,.1);
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #efefef;
}

.custom-checkbox input:focus ~ .checkmark {
    outline-color:rgb(59, 153, 252);
    outline-offset:-2px;
    outline-style:auto;
    outline-width:5px;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
  background-color: #d60438;
  border-color: #d60438;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}