Forem: Dirask-React

React - mouse button press and hold example

Dirask-React — Mon, 12 Apr 2021 19:19:45 +0000

Hi there! 👋😊

In this article, I would like to show you mouse button press and hold example in React. 🖱

Before we start, I would highly recommend you to check out the runnable example for the solution on our website:
React - mouse button press and hold example

In the beginning, I wanted to tell you that unfortunately there is no press and hold mouse button event in React. 😥
However, I will show you how to perform some logic when the mouse button is pressed and held, and how to break this logic when we stop pressing the button or when our cursor leaves the button field.

Final result:

Below example presents how to create a counter which increments on button press and hold every 0.1s. As the counter increases, the height and width of my element also increase, as they depend precisely on the counter.

In the example I've used:

useState hook - to manage the counter as App component's state,
useRef hook - to create a reference that will help us to set and clear the interval,
onMouseDown event - to start incrementing the counter,
onMouseUp / onMouseLeave events - to stop incrementing the counter,
useEffect hook - to stop the counter when App component is destroyed.

Practical example:



import React from 'react';

const App = () => {
  const [counter, setCounter] = React.useState(100);
  const intervalRef = React.useRef(null);

  React.useEffect(() => {
    return () => stopCounter(); // when App is unmounted we should stop counter
  }, []);

// styles --------------------------------------

  const containerStyle = {
    height: '300px',
    width: '300px',
  };

  const elementStyle = {
    margin: '5px',
    height: `${counter}px`,
    width: `${counter}px`,
    background: 'radial-gradient(at 25% 25%, #2b86c5, #562b7c, #ff3cac)',
    border: '2px solid black',
    borderRadius: '50%',
    boxShadow: '10px 5px 5px #BEBEBE',
  };

// functions -----------------------------------

  const startCounter = () => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 10);
  };

  const stopCounter = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };

  return (
    <div style={containerStyle}>
      <div
        onMouseDown={startCounter}
        onMouseUp={stopCounter}
        onMouseLeave={stopCounter}
        style={elementStyle}
      />
    </div>
  );
};

export default App;

You can run this example here

That's my version of handling mouse press and hold event in React.
Let me know what you think in the comments. 💬
Maybe you have a better solution? I would be glad if you share it with me! 😊

Thanks for your time and see you in the next posts! 🔥

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

React - how to make animation with CSS transition property

Dirask-React — Fri, 19 Mar 2021 08:27:07 +0000

Hi there! 👋😊

In this article, I would like to show you how to make an animated rotating square in React using transition property. ⏭

Before we start, I would highly recommend you to check out the runnable example for the solution on our website:
React - how to make animation with CSS transition property

Final effect:

Below example presents three style objects:

normalStyle which is the default style of our div element,
transformedStyle which is transformed style of our div element,
buttonStyle which is style of our button element.

The styles of our div have transition value set to '1s'. It means our component will change it's property values smoothly, over a given duration (over 1s). Additional transform parameter describes moving of an element. In our case transform rotates the element during 2s.

Practical example:



import React from 'react';

// --- style objects -------------------------------

const normalStyle = {
  margin: '50px',
  padding: '20px',
  borderRadius: '10px',
  width: '100px',
  height: '100px',
  background: '#06f2ff',
  boxShadow: '5px 5px 5px #04bd57',
  transition: '1s, transform 2s',
};

const transformedStyle = {
  margin: '50px',
  padding: '20px',
  borderRadius: '10px',
  width: '150px',
  height: '150px',
  background: '#06ff76',
  boxShadow: '5px 5px 5px #3085d6',
  transition: '1s, transform 2s',
  transform: 'rotate(180deg)',
};

const buttonStyle = {
  padding: '2px',
  border: '2px solid white',
  background: 'black',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white',
  borderRadius: '10px',
};

// --- component -------------------------------------

const App = () => {
  const [bigSize, setBigSize] = React.useState(false);
  const handleClick = () => setBigSize(!bigSize);
  return (
    <div style={{ height: '300px' }}>
      <div style={bigSize ? transformedStyle : normalStyle}>
        <button style={buttonStyle} onClick={handleClick}>
          Change size
        </button>
      </div>
    </div>
  );
};

export default App;

You can run this example here

📝 Note:
If the duration is not specified, the transition will have no effect, because the default value is 0.

If you found this solution useful you can leave a comment or reaction 💗🦄💾.
Thanks for your time and see you in the upcoming posts! 😊

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

Create simple login form in React

Dirask-React — Tue, 09 Mar 2021 18:30:45 +0000

Hello there! 👋😊

In this article, I would like to show you how to make a simple login form in React.

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
Create simple login form in React

Final effect:

Below I will try to explain to you how to create such a form in a few steps.

The whole structure of the example consists of the Field component, which will serve as a reusable code ♻, and the Form, which puts it all together.

In our case, the style property was used for styling. 🎨

To get the values entered by the user in the inputs, I've used the useRef hook, with which we can easily obtain a handle to a DOM element and retrieve the current value.

Using these values, we build an object that we can then send to the server after handling onSubmit. 📤

To prevent the page reloading onSubmit event, we explicitly called preventDefault() method.

📝Note
By default ref property is reserved by React, so we should use the forwardRef function.

Practical example:

import React from 'react';
import ReactDOM from 'react-dom';

const appStyle = {
    height: '250px',
    display: 'flex'
};

const formStyle = {
    margin: 'auto',
    padding: '10px',
    border: '1px solid #c9c9c9',
    borderRadius: '5px',
    background: '#f5f5f5',
    width: '220px',
    display: 'block'
};

const labelStyle = {
    margin: '10px 0 5px 0',
    fontFamily: 'Arial, Helvetica, sans-serif',
    fontSize: '15px',
};

const inputStyle = {
    margin: '5px 0 10px 0',
    padding: '5px', 
    border: '1px solid #bfbfbf',
    borderRadius: '3px',
    boxSizing: 'border-box',
    width: '100%'
};

const submitStyle = {
    margin: '10px 0 0 0',
    padding: '7px 10px',
    border: '1px solid #efffff',
    borderRadius: '3px',
    background: '#3085d6',
    width: '100%', 
    fontSize: '15px',
    color: 'white',
    display: 'block'
};

const Field = React.forwardRef(({label, type}, ref) => {
    return (
      <div>
        <label style={labelStyle} >{label}</label>
        <input ref={ref} type={type} style={inputStyle} />
      </div>
    );
});

const Form = ({onSubmit}) => {
    const usernameRef = React.useRef();
    const passwordRef = React.useRef();
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
            username: usernameRef.current.value,
            password: passwordRef.current.value
        };
        onSubmit(data);
    };
    return (
      <form style={formStyle} onSubmit={handleSubmit} >
        <Field ref={usernameRef} label="Username:" type="text" />
        <Field ref={passwordRef} label="Password:" type="password" />
        <div>
          <button style={submitStyle} type="submit">Submit</button>
        </div>
      </form>
    );
};

// Usage example:

const App = () => {
    const handleSubmit = data => {
        const json = JSON.stringify(data, null, 4);
        console.clear();
        console.log(json);
    };
    return (
      <div style={appStyle}>
        <Form onSubmit={handleSubmit} />
      </div>
    );
};

export default App;

You can run this example here

So that's my version of the simple login form in React.

If you found this solution useful let me know in the comment section or just leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔥🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

Simple way to use multiple radio buttons in React

Dirask-React — Mon, 08 Mar 2021 20:57:53 +0000

Many beginners have a problem with using multiple radio buttons because they do not realize that the radio buttons are grouped and only one radio button can be selected in one group.

Today, I'd like to show you how to easily use multiple radio buttons without using groups (without using the name parameter) in React. 😊

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
Simple way to use multiple radio buttons in React

Final effect:

In below example I've created RadioInput functional component which renders label with a single input type="radio" (radio button).

In the Form we have four RadioInput elements - two for gender and, two for role.

In every group we can select only one radio button at the same time, then setGender function sets gender 🧒🧑 and setRole function sets role depending on which option we choose.

Practical example:

//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';

const RadioInput = ({label, value, checked, setter}) => {
    return (
      <label>
        <input type="radio" checked={checked == value}
               onChange={() => setter(value)} />
        <span>{label}</span>
      </label>
    );
};

const Form = props => {
    const [gender, setGender] = React.useState();
    const [role, setRole] = React.useState();
    const handleSubmit = e => {
        e.preventDefault();
        const data = {gender, role};
        const json = JSON.stringify(data, null, 4);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>Gender:</label>
          <RadioInput label="Male" value="male" checked={gender} setter={setGender}  />
          <RadioInput label="Female" value="female" checked={gender} setter={setGender} />
        </div>
        <div>
          <label>Role:</label>
          <RadioInput label="Admin" value="admin" checked={role} setter={setRole} />
          <RadioInput label="User" value="user" checked={role} setter={setRole}  />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );

You can run this example here

If you found this solution useful and would like to receive more content like this leave a comment or reaction 💗🦄💾.
Thanks for your time and see you in the upcoming posts! 😊🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

How to create customized dynamic table in React (with dynamic header)

Dirask-React — Wed, 03 Mar 2021 19:00:07 +0000

Hello again! 👋😊

In the comment section under my previous post there was quite a discussion about creating a more dynamic solution for dynamic tables in React, so here we are! 🚀

Before we start, I would highly recommend you to check out runnable examples for the solution on our website:
How to create customized dynamic table in React (with dynamic header)

The final effect of this post:

In below example I used the following concept:

table is described by columns and data properties,
table is composed of header and some data records,
the column array allows us to decide which column names we want to display in the data rows,
using map() function we are able to reduce the amount of code – columns and data arrays are mapped into React components.

Remember that each record should have a unique key 🗝️ - it helps React optimally manage changes in the DOM. Such a key may be, for example, the path assigned to each element of the table.

Practical example:

import React from 'react';

const tableStyle = {
    border: '1px solid black',
    borderCollapse: 'collapse',
    textAlign: 'center',
    width: '100%'
}

const tdStyle = {
    border: '1px solid #85C1E9',
    background: 'white',
    padding: '5px'
};

const thStyle = {
    border: '1px solid #3498DB',
    background: '#3498DB',
    color: 'white',
    padding: '5px'
};

const Table = ({ id, columns, data }) => (
  <table style={tableStyle}>
    <tbody>
      <tr>
        {columns.map(({ path, name }) => (
          <th style={thStyle} key={path}>{name}</th>
        ))}
      </tr>
      {data.map((rowData) => (
        <tr key={rowData[id]}>
          {columns.map(({ path }) => (
            <td style={tdStyle} key={path}>
              {rowData[path]}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
);

// Example use --------------------

const App = () => {
  const columns = [
    { path: "id",   name: "ID" },
    { path: "name", name: "Name" },
    { path: "age",  name: "Age" },
    { path: "favFruit",  name: "Favourite Fruit" },
  ];
  const data = [
    { id: 1, name: 'Kate',  age: 25, favFruit: '🍏' },
    { id: 2, name: 'Tom',   age: 23, favFruit: '🍌' },
    { id: 3, name: 'Ann',   age: 26, favFruit: '🍊' },
    { id: 4, name: 'Jack',  age: 21, favFruit: '🍒' }
  ];

  return (
    <div>
      <Table id="id" columns={columns} data={data} />
    </div>
  );
};

export default App;

You can run this example here

If you found this solution useful you can react to this post or just leave a comment to let me know what you think. 💬
Thanks for your time! 😊

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for mentoring write to us on dirask.com -> Questions

Create simple animated bar chart in React

Dirask-React — Tue, 02 Mar 2021 19:38:11 +0000

Did you know you don't need much to build an animated bar chart?

In this article, I will try to explain how to get such an effect with React. 📊

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
Create simple animated bar chart in React

Final effect of the post:

The main idea is to create individual bars that are described from 0 to 100%. The bars are arranged sequentially next to each other in a chart, using an example data set
based on the cosine function.

Each change of the dataset describing the chart causes a smooth re-rendering (this happens due to a simple style called transition).

The whole effect is achieved with a few lines, most of the effect is actually styles. 🎨

Practical example:

import React from 'react';
import ReactDOM from 'react-dom';

// ---------------------------------

const containerStyle = {
    padding: '0 1px',
    background: '#ffffff',
    flex: '1'
};

const spaceStyle = {
    background: '#ffffff',
    transition: '0.3s'
};

const barStyle = {
    background: '#00cc00',
    transition: '0.3s'
};

const Bar = ({value}) => {
    return (
      <div style={containerStyle}>
        <div style={{...spaceStyle, height: `${100 - value}%`}} />
        <div style={{...barStyle, height: `${value}%`}} />
      </div>
    );
};

const chartStyle = {
    width: '400px',
    height: '300px',
    display: 'flex',
    overflow: 'hidden'
};

const Chart = ({data}) => {
    return (
      <div style={chartStyle}>
        {data.map((value, index) => <Bar key={index} value={value} />)}
      </div>
    );
};

// ---------------------------------

const calculateData = (xOffset) => {
    const data = [ ];
    for (var x = 0; x < 3.1415; x += 0.1) {
        const y = Math.cos(x + xOffset) + 1;
        data.push(50 * y);
    }
    return data;
};

const App = () => {
    const [data, setData] = React.useState(() => calculateData(0));
    const xOffsets = [0, 0.7853, 1.5707, 2.3559, 3.1415];
    return (
      <div>
        <Chart data={data} />
        <br />
        <div>
          <span>xOffset: </span>
          {xOffsets.map(xOffset => {
              const handleClick = () => setData(calculateData(xOffset));
              return (
                <button key={xOffset} onClick={handleClick}>{xOffset}</button>
              );
          })}
        </div>
      </div>
    );
};

export default App;

You can run this example here

What do you think about such a chart? Do you think it would be possible to construct a simple library for different types of charts?

Let me know in the comments! 😊

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

React - async image loading

Dirask-React — Thu, 25 Feb 2021 19:57:36 +0000

Hi there! 👋 😊

Did you know that if you load images after the page is loaded, the user will see the content earlier and SEO tools will detect that the page loads faster? 🚀📈

Before we start, I would highly recommend you to check out runnable example for the solution on our website: React - async image loading

In this article, I want to show you how to create a simple component in React by which the graphics are loaded after all resources are loaded.

That approach speeds up page loading by splitting the loading process into two steps:

page loading (without async images) - we see all necessary things in the right order sooner,
async images loading - images are loaded when the page is ready.

Final effect:
Arrows mark lines when images are loaded after rendering the page (when it's ready).

Below I present you a solution in which I create an in-memory only image that, after is loaded, signals to display the proper image in React on the web page.

Practical example:



import React from 'react';

const AsyncImage = (props) => {
    const [loadedSrc, setLoadedSrc] = React.useState(null);
    React.useEffect(() => {
        setLoadedSrc(null);
        if (props.src) {
            const handleLoad = () => {
                setLoadedSrc(props.src);
            };
            const image = new Image();
            image.addEventListener('load', handleLoad);
            image.src = props.src;
            return () => {
                image.removeEventListener('load', handleLoad);
            };
        }
    }, [props.src]);
    if (loadedSrc === props.src) {
        return (
            <img {...props} />
        );
    }
    return null;
};

const App = () => {
    return (
      <div>
        <AsyncImage src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
        <p>Some text here ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" />
        <p>Some text here ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" />
        <p>Some text here ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" />
      </div>
    );
};

export default App;

I recommend copying the solution to your local React project, open developer tools in your browser and then run the application to see the result.

If you found this article useful and would like to receive more content like this, you could react to this post, which would make me very happy. 😊

See you in the next posts! 🖐

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

JavaScript - remove duplicates from array

Dirask-React — Thu, 25 Feb 2021 17:18:44 +0000

Hello Coders! 👋 😊

In this short article, I would like to show you how to remove duplicated items from an array in JavaScript.

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
JavaScript - remove duplicates from array

Quick solution

In this quick solution, I've used the built-in filter() function which has been added to improve functional programming.

If an index with the same value is found on another position, it won't be saved (in other words, it saves only those that occurred for the first time, it does not take into account the next ones).

Practical example:

const array = [1, 2, 3, 1, 1, 2, 2, 3, 3];
const result = array.filter((item, index, array) => array.indexOf(item) === index);

console.log(JSON.stringify(result)); // [1,2,3]

You can run this example here

Iterative example

In this approach, I've used a blocker object that represents a map of elements that have already occurred. The for loop iterates only once over all elements adding to this map and if an element has already appeared, it won't add it again.

This solution is more optimal because it has lower computational complexity. 📉✅

Practical example:

const removeDuplicates = (array) => {
    const result = [];
    const blocker = {}; // prevents against item duplication
    for (const item of array) {
        if (blocker.hasOwnProperty(item)) {
            continue;
        }
        blocker[item] = true;
        result.push(item);
    }
    return result;
};

// Usage example:

const array = [1, 2, 3, 1, 1, 2, 2, 3, 3];
const uniqueItems = removeDuplicates(array);

console.log(JSON.stringify(uniqueItems)); // [1,2,3]

You can run this example here

Thank you for your time! I hope you like the solution. 😊
If you have any questions, drop a comment below. 💬

See you in upcoming posts! 🔥🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

React - create simple animated progress bar

Dirask-React — Wed, 24 Feb 2021 18:18:21 +0000

Hello! 👋 😊

Today I want to show you a simple animated progress bar that I recently made in React.

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
React - create simple animated progress bar

Final effect of this post:

Below I present you my solution for a simple progress bar with some styling 📊🎨.

In this solution I use:

useState hook to store the progress bar's state,
content width measured in percents according to the container - that trick lets us display progress from 0% to 100% in an easy way,
some example buttons that trigger setProgress() method to demonstrate how the progress bar works (animation between switching has a nice effect).

Practical example:

import React from 'react';

const containerStyle = {
    border: '1px solid silver',
    background: '#ededed'
};

const contentStyle = {
    background: '#00cc00',
    height: '24px',
    textAlign: 'center',
    lineHeight: '24px',
    fontFamily: 'sans-serif',
    transition: '0.3s'
};

const ProgressBar = ({progress}) => {
    const state = `${progress}%`;
    return (
      <div style={containerStyle}>
        <div style={{...contentStyle, width: state}}>
          {progress > 5 ? state : ''}
        </div>
      </div>
    );
};

const App = () => {
  const [progress, setProgress] = React.useState(25);
  return (
    <div>
      <ProgressBar progress={progress} />
      <br />
      <div>
        <button onClick={() => setProgress(0)}>0%</button>
        <button onClick={() => setProgress(5)}>5%</button>
        <button onClick={() => setProgress(15)}>15%</button>
        <button onClick={() => setProgress(50)}>50%</button>
        <button onClick={() => setProgress(75)}>75%</button>
        <button onClick={() => setProgress(100)}>100%</button>
      </div>
    </div>
  );
};

export default App;

You can run this example here

Let me know what you think in the comment section! 😊💬

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

React - how to make left-side animated menu

Dirask-React — Wed, 24 Feb 2021 16:13:04 +0000

Hey there! 👋 😊

In this post, I want to show you a left-side animated menu that I created recently.

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
React - how to make left-side animated menu

Final effect:

Below I present you how to create this simple customized left-side menu that displays list of different kind of food 🍒🥦🍟 on click event.

In the solution, I've used a modern approach that involves the use of functional components and React hooks. In this case useState hook stores the state of my side menu if it's visible or not.

There is also some styling in the example, which I recommend you carefully analyze and change as you want. You can also modify the runnable example here and create your own left-side animated menu with no need to use any additional tools. 😊

Practical example:

import React from 'react';

const buttonStyle = {
  padding: '10px 20px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#3085d6',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white'
};

const commonStyle = {
  position: 'fixed',
  top: 0,
  bottom: 0,
  padding: '5px',
  border: '1px solid #0657FF',
  borderRadius: '0 30px 30px 0',
  background: '#C9E5FF',
  width: '280px',
  transition: '0.5s',
  overflow: 'hidden'
};

const visibleStyle = {
  ...commonStyle,
  left: '0'
};

const hiddenStyle = {
  ...commonStyle,
  left: '-300px'
};

const liStyle = {
  margin: '10px',
  padding: '5px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#5fa8ed',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white',
  listStyle: 'circle inside'
};

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div style={{ height: "200px" }}>
      <button style={buttonStyle} onClick={() => setVisible(true)}>
        Show
      </button>
      <div style={visible ? visibleStyle : hiddenStyle}>
        <button style={buttonStyle} onClick={() => setVisible(false)}>
          Hide
        </button>
        <div>
          <ul>
            <li style={liStyle}>Fruits 🍏🍌🍒</li>
            <li style={liStyle}>Vegetables 🥕🥦🍅</li>
            <li style={liStyle}>Fast Food 🍕🍟🍔</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;

You can run this example here

Leave a comment to let me know what you think! 😊💬

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

React - create simple animated expander

Dirask-React — Tue, 23 Feb 2021 17:42:24 +0000

Hi there! 👋 😊

Today, I was thinking about creating an animated expander in React and I came up with the following solution. 🔽

Before we start, I would highly recommend you to check out runnable examples for the solution on our website:
How to create simple animated expander in React

Effect of this short post:

In the example below, I've created a simple expander that displays Fruits 🍉 and Vegetables 🍅 lists on click event. I've used a modern approach that involves the use of functional components and React hooks. In this case useState hook stores the state of my expander. 🔺🔻

Practical example:

import React from 'react';

const expanderStyle = {
    margin: '6px 0',
    padding: '2px',
    border: '1px solid #85C1E9'
};

const headerStyle = {
    display: 'flex',
    cursor: 'pointer'
};

const titleStyle = {
    padding: '3px',
    flex: 'none'
};

const spacerStyle = {
    flex: '1'
};

const iconStyle = {
    padding: '3px',
    flex: 'none'
};

const contentStyle = {
    overflow: 'hidden',
    transition: 'all 0.3s'
};

const contentExpandedStyle = {
    ...contentStyle,
    padding: '4px 0',
    border: '1px solid #85C1E9',
    height: 'auto',
    filter: 'opacity(1)'
};

const contentCollapsedStyle = {
    ...contentStyle,
    padding: '0 0',
    border: '1px solid transparent',
    height: '0',
    filter: 'opacity(0)'
};

const Expander = ({title, children}) => {
    const [expanded, setExpanded] = React.useState(false);
    const handleHeaderClick = () => {
        setExpanded(expanded => !expanded);
    };
    return (
      <div style={expanderStyle}>
        <div style={headerStyle} onClick={handleHeaderClick}>
          <div style={titleStyle}>{title}</div>
          <div style={spacerStyle} />
          <div style={iconStyle}>{expanded ? '🔺' : '🔻'}</div>
        </div>
        <div style={expanded ? contentExpandedStyle : contentCollapsedStyle}>
          {children}
        </div>
      </div>
    );
};

// Usage example:

const App = () => {
  return (
    <div style={{height: '260px'}}>
      <Expander title="🍏🍌🍊 Fruits">
        <ul>
          <li>🍏 Apple</li>
          <li>🍌 Banana</li>
          <li>🍊 Orange</li>
        </ul>
      </Expander>
      <Expander title="🥕🥒🍅 Vegetables">
        <ul>
          <li>🥕 Carrot</li>
          <li>🥒 Cucumber</li>
          <li>🍅 Tomato</li>
        </ul>
      </Expander>
    </div >
  );
};

export default App;

You can run this example here

Let me know if you like it or not in the comment section! 😊

Write to us!

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

React - how to create dynamic table

Dirask-React — Wed, 17 Feb 2021 18:51:21 +0000

Hello Coders! 👋 😊

In this article, I would like to show you how to create a dynamic table in React.

Before we start, I would highly recommend you to check out runnable examples for the solution on our website:
How to create customized dynamic table in React

The final effect of this post:

Below example presents how to create a dynamic table from an array. Example table should consist of a header and some data records. While creating such records use map() function to convert them into elements.
Remember that each record should have a unique key 🗝️ - it helps React optimally manage changes in the DOM. Such a key may be, for example, the id assigned to an element of the table.

import React from 'react';

const tableStyle = {
    border: '1px solid black',
    borderCollapse: 'collapse',
    textAlign: 'center',
    width: '100%'
}

const tdStyle = {
    border: '1px solid #85C1E9',
    background: 'white',
    padding: '5px'
};

const thStyle = {
    border: '1px solid #3498DB',
    background: '#3498DB',
    color: 'white',
    padding: '5px'
};

const App = () => {
    const students = [
        { id: 1, name: 'Bob',  age: 25, favFruit: '🍏' },
        { id: 2, name: 'Adam', age: 43, favFruit: '🍌' },
        { id: 3, name: 'Mark', age: 16, favFruit: '🍊' },
        { id: 4, name: 'John', age: 29, favFruit: '🍒' }
    ];
    return (
      <div>
        <table style={tableStyle}>
          <tbody>
            <tr>
              <th style={thStyle}>Id</th>
              <th style={thStyle}>Name</th>
              <th style={thStyle}>Age</th>
              <th style={thStyle}>Favourite Fruit</th>
            </tr>
            {students.map(({ id, name, age, favFruit }) => (
              <tr key={id}>
                <td style={tdStyle}>{id}</td>
                <td style={tdStyle}>{name}</td>
                <td style={tdStyle}>{age}</td>
                <td style={tdStyle}>{favFruit}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
};

export default App;

You can run this example here

That's how it works.
If you found this solution useful you can react to this post or just leave a comment to let me know what you think. Thanks for reading! 😊

Write to us!

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for mentoring write to us on dirask.com -> Questions