
In my React application, I needed a way to pass custom variables from my JavaScript code to my CSS code. For example, I want to do this:

```javascript
function DemoApp() {
  return <MyCustomButton marginTop={"10px"} />;
}
```

Then, `MyCustomButton` will need to set its margin top to `10px`. So, I need a mechanism to take the props values and pass it down to CSS and set it. Let's see how it's down. I am using [CSS Modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/) in my React app, btw.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";
function MyCustomButton() {
  return <button className={styles.button}></button>;
}
```

## Defining CSS variables

To use dynamic values in CSS, one approach is through [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). I can define a CSS variable as `--my-var: 10px` and then access it with `margin-top: var(--my-var);`. So for mt `MyCustomButton` component, I defined the required CSS variables first.

```css
/* my-custom-button.module.css */
.button {
  /* these variables will be used later to set from JavaScript */
  --marginTop: 0;
  --marginBottom: 0;

  margin-top: var(--marginTop);
  margin-bottom: var(--marginBottom);
}
```

Now that I have my CSS variables defined, next step is to set them.

## Setting CSS variables from React component

I can pass `style` object to JSX that react will apply to the underlying element. I need to construct this `style` object with all the variables that I want to set.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";
function MyCustomButton(props) {
  return (
    <button
      className={styles.button}
      style={{
        "--marginTop": props.marginTop,
        "--marginBottom": props.marginBottom,
      }}
    ></button>
  );
}
```

This way, I can pass in whatever the custom props to the underlying CSS variable.

## Using the utility method to construct the style object

Manually constructing the `style` object will not scale well if you have 10s of custom attributes. In such cases, we can write a simple function that construct the `style` object for us. We can also add any validation to the code.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";

/**
 *
 * @param props react props object with key, value pairs
 * @param variableNames array of names, for ex. ['marginTop', 'marginBottom']
 * @returns a object such as {"--marginTop": "10px", "--marginBottom": "10px"}
 */
function propsToCSSVariable(props, variableNames) {
  return variableNames.reduce((acc, key) => {
    if (props[key] !== undefined) {
      acc[`--${key}`] = props[key];
    }
    return acc;
  }, {});
}

const cssVariableNames = ["marginTop", "marginBottom"];
function MyCustomButton(props) {
  return (
    <button
      className={styles.button}
      style={propsToCSSVariable(props, cssVariableNames)}
    ></button>
  );
}
```

With this approach, now I can completely customize my React components with JavaScript and CSS.

If you are following any other techniques, please do let me know.


Setting CSS variables from a React app


In Eclipse, when you press *Ctrl *button and click on any Class names, the IDE will take you to the source file for that class. This is the normal behavior for the classes you have in your project.

But, in case you want the same behavior for Java's core classes too, you can have it by attaching the Java source with the Eclipse IDE. Once you attach the source, thereafter when you _Ctrl Click_ any Java class names (_String_ for example), Eclipse will open the source code of that class.

To attach the Java source code with Eclipse,

1.  When you install the JDK, you must have selected the option to install the Java source files too. This will copy the **src.zip **file in the installation directory.
2.  In Eclipse, go to **Window -> Preferences -> Java -> Installed JREs -> Add **and choose the JDK you have in your system.
3.  Eclipse will now list the JARs found in the dialog box. There, select the **rt.jar** and choose **Source Attachment**. By default, this will be pointing to the correct **src.zip**. If not, choose the **src.zip **file which you have in your java installation directory.  
    ![java source attach in eclipse][1]
4.  Similarly, if you have the **javadoc **downloaded in your machine, you can configure that too in this dialog box.

[1]: https://veerasundar.com/img/2011/08/source-attach.png "source-attach"

Done! Here after, for all the projects for which you are using the above JDK, you'll be able to browse the Java's source code just like how you browse your own code.


Attaching Java source with Eclipse IDE


Notepad is the lightest yet powerful text editor I've ever came across. It's fast, slick and has been my [default text editor][1] for years.

[1]: https://veerasundar.com/blog/notepad-a-cool-source-code-editor

In the past, I've learned/discovered few tips that helped me a lot while using Notepad . In this post, I'm sharing those tips in the hope that it might help someone else too. If you know any other tips about Notepad , please feel free to share.

## 1. Transform your Notepad to a post-it

Re-size the Notepad editor window to the size you want and then **press F12** which will make the text editor to stick on top of all other windows and will hide toolbars/menu bars.

To get back original window, just click on the **Restore** button.

## 2. How to delete a Macro in Notepad

To delete a macro in Notepad , go to **Settings -> Shortcut Mapper -> Macros** and then right-click on the macro name which you want to delete and click **delete**.

## 3. Edit two files side by side in Notepad

Open the two files which you want to edit simultaneously. Right click on any one file's tab and then select **Move to other view** which will split the screen into two for each of the file.

Of course, you can have more than 2 files open at the same time, and you can move any file into any view. Just follow the above said tip.

## 4. Switching between vertical and horizontal split in side by side editing mode

When you edit two files side by side, the files can be split either vertically or horizontally. To switch between vertical Horizontal, right click on the bar which splits the views and then select **Rotate to Left** or **Rotate to Right**.

## 5. Auto close HTML/XML tag

Go to **TextFX -> TextFX Settings -> Autoclose XHTML/XML**. After checking that option, when ever you edit a html or xml file, the tags will be auto-closed as you type.


#source (3)