{"pageProps":{"posts":[{"slug":"react-material-ui-custom-font","title":"How to add a custom font in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T17:00:00.000Z","url":"react-material-ui-custom-font","hashtags":"#react #material-ui","excerpt":"In this tutorial, I have discussed how you can add a custom font and override the React Material UI font."},{"slug":"react-material-ui-dark-mode","title":"How to build a dark mode theme in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T12:00:00.000Z","url":"react-material-ui-dark-mode","hashtags":"#react #material-ui","excerpt":"A practical guide on how to create a custom ThemeProvider component to switch between light mode and dark mode theme in React material UI"},{"slug":"react-material-ui-detect-dark-mode","title":"How to detect dark mode theme in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T02:00:00.000Z","url":"react-material-ui-dark-mode","hashtags":"#react #material-ui","excerpt":"You will learn to apply React material ui useMediaQuery() hook to detect dark mode theme"},{"slug":"react-material-ui-create-custom-theme","title":"How to create a custom theme in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T00:00:00.000Z","url":"react-material-ui-create-custom-theme","hashtags":"#react #material-ui","excerpt":"Learn to create a customize theme in React Material UI"},{"slug":"react-material-ui-use-theme","title":"How to get React material ui theme object in function components","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-15T00:00:00.000Z","url":"react-material-ui-use-theme","hashtags":"#react #material-ui","excerpt":"Learn to get the React Material UI theme object in function components using the useTheme hook"},{"slug":"react-material-ui-hide-autocomplete-clear-button","title":"How to hide clear button of Autocomplete in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2022-10-11T00:00:00.000Z","url":"react-material-ui-hide-autocomplete-clear-button","hashtags":"#react #material-ui","excerpt":"Learn to hide the clear button of Mui Autocomplete"},{"slug":"react-change-button-text-on-click","title":"How to change button text on click in React","author":{"name":"Suraj Sharma","picture":""},"date":"2022-09-20T13:00:00.000Z","url":"react-change-button-text-on-click","hashtags":"#react","excerpt":"This tutorial is about changing the text of button when clicked on it in React"},{"slug":"react-get-file-size","title":"How to get the size of a file in React","author":{"name":"Suraj Sharma","picture":""},"date":"2022-09-16T00:00:00.000Z","url":"react-get-file-size","hashtags":"#react","excerpt":"Learn to get the size of an image file before uploading it to the server using React.js"},{"slug":"react-disable-select-field","title":"How to disable a select field in React","author":{"name":"Suraj Sharma","picture":""},"date":"2022-09-07T00:00:00.000Z","url":"react-disable-select-field","hashtags":"#react","excerpt":"Learn to disable a select field and its option in react using useState() hook and the disabled property"},{"slug":"react-disable-link-tag","title":"How to disable a link tag in React","author":{"name":"Suraj Sharma","picture":""},"date":"2022-08-02T00:00:00.000Z","url":"react-disable-link-tag","hashtags":"#react","excerpt":"Learn to use css and javascript ways to disable link tags in React"},{"slug":"react-file-upload-accept-only-images","title":"How to accept only image files in react file upload","author":{"name":"Suraj Sharma","picture":""},"date":"2022-08-02T00:00:00.000Z","url":"react-file-upload-accept-only-images","hashtags":"#react","excerpt":"This tutorial will help to develop a react file upload component that accepts only image files"},{"slug":"react-create-csv-file","title":"How to create a csv file from response data in React","author":{"name":"Suraj Sharma","picture":""},"date":"2022-01-20T00:00:00.000Z","url":"react-create-csv-file","hashtags":"#react","excerpt":"Create and export a csv file from the response data results in React using react-csv"},{"slug":"react-material-ui-set-typography-color","title":"How to change Typography color in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-11-03T00:00:00.000Z","url":"react-material-ui-set-typography-color","hashtags":"#react #material-ui","excerpt":"Learn to set a different text color to the Typography component in React Material UI"},{"slug":"react-material-ui-add-typography-variants","title":"How to add custom typography variants in React material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-11-02T00:00:00.000Z","url":"react-material-ui-add-typography-variants","hashtags":"#react #material-ui","excerpt":"Learn to create and use your own typography custom variants in your React Material UI"},{"slug":"react-upload-file-using-axios","title":"How to upload files in React using Axios","author":{"name":"Suraj Sharma","picture":""},"date":"2021-10-09T00:00:00.000Z","url":"react-upload-file-using-axios","hashtags":"#react #axios","excerpt":"Learn to upload files in React using Axios post method"},{"slug":"react-handle-radio-buttons","title":"How to handle and manage radio buttons state in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-10-01T00:00:00.000Z","url":"react-handle-radio-buttons","hashtags":"#react","excerpt":"Learn to handle and manage radio buttons state in React without using any 3rd party form libraries"},{"slug":"axios-post-form-data","title":"How to submit form data in post request using axios","author":{"name":"Suraj Sharma","picture":""},"date":"2021-08-01T00:00:00.000Z","url":"axios-post-form-data","hashtags":"#react #axios","excerpt":"Learn to submit form data in HTTP post request using axios"},{"slug":"react-clear-input-fields","title":"How to reset input fields in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-27T00:00:00.000Z","url":"react-clear-input-fields","hashtags":"#react","excerpt":"Learn how you can reset input fields in controlled components and in uncontrolled components"},{"slug":"react-router-default-route","title":"How to set a default route in React Router","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-15T12:00:00.000Z","url":"react-router-default-route","hashtags":"#react","excerpt":"Learn to set a default route in React Router using the Redirect component"},{"slug":"react-router-dom-pass-data","title":"How to pass state data in React Router","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-15T00:00:00.000Z","url":"react-router-dom-pass-data","hashtags":"#react","excerpt":"Learn how you can pass data between the routes using the react-router-dom library"},{"slug":"react-material-ui-import-icons","title":"How to use Material UI icons in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-14T08:00:00.000Z","url":"react-material-ui-import-icons","hashtags":"#react #material-ui","excerpt":"Learn to import and use material-ui icons in React components"},{"slug":"react-disable-input-field","title":"How to conditionally disable an input field in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-14T00:00:00.000Z","url":"react-disable-input-field","hashtags":"#react","excerpt":"Learn to conditonally disable an input field in React"},{"slug":"react-conditional-routing","title":"How to achieve conditional routing in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-11T00:00:00.000Z","url":"react-conditional-routing","hashtags":"#react","excerpt":"Learn to conditionally route between components in React using react-router-dom"},{"slug":"react-material-ui-add-classes","title":"How to add multiple class names in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-08T00:00:00.000Z","url":"react-material-ui-add-classes","hashtags":"#react #material-ui","excerpt":"Learn to add multiple class names in React Material UI using clsx library"},{"slug":"react-pass-arguments-to-event-handlers","title":"How to pass arguments to event handlers in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-06-06T00:00:00.000Z","url":"react-pass-arguments-to-event-handlers","hashtags":"#react","excerpt":"Learn to pass one or arguments to event handler functions in React"},{"slug":"react-onkeypress-form-submit","title":"How to trigger button onclick event on Enter key press in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-05-30T00:00:00.000Z","url":"react-onkeypress-form-submit","hashtags":"#react","excerpt":"Learn to submit a React form by triggering submit button click on Enter key press"},{"slug":"conditionally-apply-classes-in-react","title":"How to conditionally apply class names in React JS","author":{"name":"Suraj Sharma","picture":""},"date":"2021-05-28T00:00:00.000Z","url":"conditionally-apply-classes-in-react","hashtags":"#react #clsx","excerpt":"A couple of approaches to condtionally apply class names in React JS"},{"slug":"react-conditional-props","title":"How to conditionally add props to React component","author":{"name":"Suraj Sharma","picture":""},"date":"2021-05-28T00:00:00.000Z","url":"react-conditional-props","hashtags":"#react","excerpt":"Learn to conditionally add or remove props to React components using JavaScript ternary operator"},{"slug":"react-url-query-params","title":"How to get query string of a current URL in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-05-23T00:00:00.000Z","url":"react-url-query-params","hashtags":"#react #react-router-dom","excerpt":"Learn to create a custom hook to get query string of a URL in React"},{"slug":"react-update-parent-state-from-child","title":"How to update parent state from child in React","author":{"name":"Suraj Sharma","picture":""},"date":"2021-05-21T00:00:00.000Z","url":"react-update-parent-state-from-child","hashtags":"#react #typescript","excerpt":"Learn to update parent component state from child components in React"},{"slug":"auto-focus-input-element-in-react","title":"How to autofocus an input element in React using useRef() hook","author":{"name":"Suraj Sharma","picture":""},"date":"2021-01-03T20:00:00.000Z","url":"auto-focus-input-element-in-react","hashtags":"#react #reacthooks","excerpt":"Learn to focus JSX elements in React function component using the useRef() hook"},{"slug":"react-call-parent-method-in-child","title":"Call parent component method in a child component in React and Typescript","author":{"name":"Suraj Sharma","picture":""},"date":"2020-12-05T02:00:00.000Z","url":"react-call-parent-method-in-child","hashtags":"#react #typescript","excerpt":"How to call a parent component method in a child component in React and Typescript"},{"slug":"react-embed-videos","title":"How to embed a Youtube video in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-12-02T08:00:00.000Z","url":"react-embed-videos","hashtags":"#react","excerpt":"Embed a Youtube, Facebook, Twitch or any other external video on your React app using react-player"},{"slug":"pass-props-to-makestyles","title":"How to pass props to the makeStyles API in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-29T12:00:00.000Z","url":"pass-props-to-makestyles","hashtags":"#react #material-ui","excerpt":"Learn how to pass a component props to the makeStyles API in React Material UI that dynamically change the style property"},{"slug":"react-component-as-props-typescript","title":"How to pass React components as props in TypeScript","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-29T07:00:00.000Z","url":"react-component-as-props-typescript","hashtags":"#react #typescript","excerpt":"Learn how you can pass an entire component as props in React and TypeScript"},{"slug":"react-scroll-to-bottom","title":"How to scroll to the bottom of JSX elements in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-25T09:00:00.000Z","url":"react-scroll-to-bottom","hashtags":"#react","excerpt":"How to scroll to the bottom of a JSX element using useRef() hook"},{"slug":"react-scroll-to-top","title":"How to scroll to top of the page in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-22T09:00:00.000Z","url":"react-router-dom-pass-data","hashtags":"#react","excerpt":"Scroll to the top of the page in React using useEffect() react hook"},{"slug":"react-type-function-components","title":"How to write React function components in Typescript","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-21T06:00:00.000Z","url":"react-type-function-components","hashtags":"#react #typescript","excerpt":"Learn to write strongly type React function components in TypeScript"},{"slug":"react-submit-login-form","title":"How to submit a login form in React using React hook","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-15T00:00:00.000Z","url":"react-submit-login-form","hashtags":"#react","excerpt":"Learn how to submit a controlled login form in React using html form onSubmit attribute"},{"slug":"react-show-hide-component","title":"How to show and hide components in React using React Hook","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-08T10:30:00.000Z","url":"react-show-hide-component","hashtags":"#react","excerpt":"Learn to conditionally show and hide components in React using useState hook"},{"slug":"import-css-in-react","title":"How to import CSS from the public folder in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-07T10:00:00.000Z","url":"import-css-in-react","hashtags":"#react","excerpt":"Import a css file from the public folder in React"},{"slug":"react-material-ui-typography-bold","title":"How to make React Material UI Typography bold","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-07T08:00:00.000Z","hashtags":"#react #material-ui","excerpt":"Learn to change the font-weight of the React Material UI Typography component to bold"},{"slug":"react-material-ui-font-family","title":"How to change font family of typography in React Material UI","author":{"name":"Suraj Sharma","picture":""},"date":"2020-11-02T08:00:00.000Z","hashtags":"#react #material-ui","excerpt":"Learn to change the font family of React Material UI Typography"},{"slug":"react-add-item-to-list","title":"How to add an item to a list in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-10-02T13:00:00.000Z","url":"react-add-item-to-list","hashtags":"#react","excerpt":"Learn to add an item to a state Array in React using the spread operator and the concat method"},{"slug":"render-list-in-react","title":"How to render a list of items in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-10-02T08:00:00.000Z","url":"How to render a list of items in React","hashtags":"#react","excerpt":"Learn to render a list of items in React using the Array.map() method"},{"slug":"background-image-in-react","title":"How to set a background image from the public folder in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-09-26T14:00:00.000Z","url":"background-image-in-react","hashtags":"#react","excerpt":"In this tutorial, I have discussed what the best way to set a /public folder image as a background image in React JSX"},{"slug":"current-url-in-react","title":"How to get the current URL and pathname in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-09-21T00:00:00.000Z","url":"current-url-in-react","hashtags":"#react #react-router-dom","excerpt":"In this tutorial, I have discussed different ways to get the current URL and pathname in React - uselocation hook and window.location object"},{"slug":"deploy-react-app-to-github-pages","title":"How to deploy a create React app to Github pages for free","author":{"name":"Suraj Sharma","picture":""},"date":"2020-09-16T12:00:00.000Z","url":"deploy-react-app-to-github-pages","hashtags":"#react #github","excerpt":"A practical guide on how to deploy or host your React app on Github Pages for free using 6 simple steps."},{"slug":"disable-button-in-react","title":"How to disable a Button when an Input field is Empty in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-09-16T00:00:00.000Z","url":"disable-button-in-react","hashtags":"#react","excerpt":"In this tutorial, I have discussed how you can use disabled attribute of a button element to disable the button when an input field is empty in React"},{"slug":"react-login-form-typescript","title":"How to build a React Login Form with Typescript and React hooks","author":{"name":"Suraj Sharma","picture":""},"date":"2020-09-09T00:00:00.000Z","url":"react-login-form-typescript","hashtags":"#react #typescript","excerpt":"A practical guide on how you can create a react login form and form validation with Typescript, React hooks and Material UI"},{"slug":"meta-title-tag-in-react","title":"How to dynamically set Meta Title Tag in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-09-06T00:00:00.000Z","url":"meta-title-tag-in-react","hashtags":"#react #react-helmet","excerpt":"Created a custom React component with React Helmet to dynamically set a page meta title tag."},{"slug":"conditional-rendering-in-react","title":"How to conditionally render React components using React hooks","author":{"name":"Suraj Sharma","picture":""},"date":"2020-08-29T23:00:00.000Z","url":"conditional-rendering-in-react","hashtags":"#react","excerpt":"You will learn 3 ways to conditionally render components in React"},{"slug":"for-loop-in-react","title":"How to loop through an array of objects in React","author":{"name":"Suraj Sharma","picture":""},"date":"2020-08-26T00:00:00.000Z","url":"for-loop-in-react","hashtags":"#react #array","excerpt":"for-of loop and array.map() method, a practical guide on how to loop through an array of objects in React"},{"slug":"personal-blog-built-using-nextjs-and-typescript","title":"Personal Blog Built using Nextjs and TypeScript","author":{"name":"Suraj Sharma","picture":""},"date":"2020-04-12T00:00:00.000Z","url":"personal-blog-built-using-nextjs-and-typescript","hashtags":"#react #nextjs #typescript","excerpt":"Things to consider when building a personal blog website with React"}]},"__N_SSG":true}