How to add CSS modules into your react Application?

“Believe in yourself && Keep Learning”

Step1:- In our example we have take “create-react-app” template as reference. Install this and than perform “yarn eject

What is yarn eject:- it will give you control of the create-react-app and you can install or play with config settings or package.json file.

Step2:- Search for “css-loader” inside the file “config/webpack.config.dev.js” and enable CSS modules in this.

Before:-

 require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },

After:-

              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: "[name]__[local]___[hash:base64:5]"
                },
              },

Step3:- Change it for production file also(“config/webpack.config.prod.js” )

Before:-

  loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },

After:-

                    {
                      loader: require.resolve('css-loader'),
                      options: {
                        importLoaders: 1,
                        modules: true,
                        minimize: true,
                        sourceMap: shouldUseSourceMap,
                      },
                    },

Step4:-Implementing CSS modules,

use >  import styes from ‘filename’ and than className={styles.class}

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import styles from './ToolTip.css';

export default class ToolTip extends Component {
    static displayName = "ToolTip";

    static propTypes= {
        children: PropTypes.node.isRequired,
    }

    render(){
        const {children} = this.props;
        return(
            <div className={styles.header}>
               {children}
            </div>
        );
    }
}

Step5:- yarn start
Now React app is happily married to CSS modules.

Note:- Incase you are facing issue with using global classes and CSS modules together you can use “ClassNames”

Example code using both css modules and global classes.

import classnames from 'classnames';
import styles from './test.module.scss';
<Button
          className={classnames('button', 'button-primary', styles.login)}
          type="submit"
        >
Test Button
</Button>

How to check that javascript object contains the given key?

A wet man does not fear the rain.

Issue:-How do I check if an object has a key in JavaScript?

Example:-

// Sample Object
const REMINDER = "REMIND_ME";
reminderObj= {
INBOX:`${REMINDER}_INBOX`,
USERS:`${REMINDER}_USERS`,
GROUPS:`${REMINDER}_GROUPS`,
}

Problem1: Now we want to check that our object have “INBOX” as key or not?

Solution:- 

Object.prototype.hasOwnProperty.call(reminderObj,"INBOX");
Note:- We could directly use hasOwnProperty but to avoid eslint errors we have used the longer syntax as above.

Problem2: Now we want to check what is the value for given key say “INBOX” inside our object?

const reminderLocation = "INBOX";

reminderObj[reminderLocation];

or
reminderObj.INBOX;

 javascript object

Handy tips and Tools for working with wordpress -Part2?

“The best teachers are those who show you where to look, but don’t tell you what to see.”

1.How to add text-slider in wordpress pages ?
Solution:-
By using the “Text slider plugin

Activate the plugin > Add the Main and Sub text > Configure the settings > add the wp_text_slider();
?> in the code where you want to add this effect.

2.How to send contact email in wordpress ?
Solution:-
By using the “WCP contact” plugin

Activate the plugin > Add the Main and Sub text > Configure the settings > add the ;
?> in the shortcode like [wcp_contactform id=”wcpform_1″] where you want to add this form.

Note for sending the email to your email inbox you need to add the “SMTP plugin” else above plugin will show email messages inthe wordpress itself.

Not able to receive email using WCP contact plugin.

3.How to redirect page not found(404) to home page of website?
Solution:-
Incase you dont want to desing the 404 page, just follow the below code to redirect user to home page.

1.Open your 404.php page  (incase its not present use create one inside the themes folder )
2.Add the below lines of code, publish and you are done

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();
?>

4.How to add carousel slider for the featured posts?
Solution:-
1.Using “carosuel slider“, add the plugin and select the option as post.

5.How to add Team member page in wordpress?
Solution:-
1.Using “Team member showcase plugin“, add the plugin and explore the free styles available.

More wordpress tips.