Nuclear Pumpkin Mocha


    1.0.5 • Public • Published

    Data Protect

    Protect data such as email addresses from spam bots on your website


    This package should not be used to transport sensitive information accross the internet as the methods of encryption and decryptions are not built with the purpose of securing data but instead obfuscating it. If you need to encrypt and decrypt data you should instead look for a cryptography library using algorithms like AES and RSA.

    What is this?

    This npm package contains tools that you may use to try to reduce spam through email links and other vulnerable data on your website by hiding the data from the source code through a customisable encoding/decoding process. It is recommended that you read the blog post here for more information.

    Real world example

    For a real world example, take a look at my website, specifically the index.js page and the contact_email.js component.



    DataProtect.options: get, set

    The default config can be read (and modified) by accessing the defaultConfig property.

        key: 'secret key', // a string that will be used in the encoding process
        x: 5, // a number that influences the result
        delimiter: '-', // characer(s) that goes between numbers
        suppressConsole: false // if for whatever reason you want to go against the recommended advice, you can make the code shut up by setting this to true

    Encode Data

    DataProtect.encodeData (data, options)

    • data: can be a string, number, whatever
    • options: should match the syntax of the options object. If properties of the object are not set, defaults will be used

    Decode Data

    DataProtect.decodeData (data, options)

    • data: is the encoded data
    • options: same as what you used for encoding

    Next.js Example


    import React from 'react';
    import { DataProtect } from 'data-protect'
    export default class ContactEmail extends React.Component {
        constructor(props) {
            this.placeholder = 'loading...'
            // ensure that these options match those used to encode the component
            this.options = {
                key: props.emailKey,
                x: 8,
                delimiter: ' '
            this.state = {
                email: this.placeholder
        componentDidMount() {
            this.delayTimer = setTimeout(() => {
                    email: DataProtect.decodeData(this.props.encodedEmail, this.options)
            }, this.props.delay)
        componentWillUnmount() {
        render() {
            return (
                <a href={ === this.placeholder ? '#' : `mailto:${}?subject=${this.props.subject}`}
                className="hover:underline hover:text-gray-300">
                    { }

    getStaticProps and usage

    (getStaticProps is used to ensure that the email is encoded at build time)

    import { DataProtect } from 'data-protect'
    export async function getStaticProps () {
        // generate a random string
        const key = ((Math.random() + 1).toString(36).substring(2,9)) + ((Math.random() + 1).toString(36).substring(2,9)); 
        return {
            props: {
                encodedEmail: DataProtect.encodeData("",
                    key: key,
                    x: 8,
                    delimiter: ' '
                emailKey: key
    <ContactEmail encodedEmail={encodedEmail} emailKey={emailKey} subject="I am interested in your work" delay="3000" />




    npm i data-protect

    DownloadsWeekly Downloads






    Unpacked Size

    14.2 kB

    Total Files


    Last publish


    • jackchilds