How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code:

<hr style={{ width: "80%", border: "1px solid black" }} />

You can customize the width, length, and other properties as needed.

If you want to display an arrow pointing towards the right direction instead of a line, what would be the best approach (with customization options like width, length, color, etc.)?

https://i.sstatic.net/XhUvb.png

While there are many libraries available, most of them require specifying two components for drawing from one component to another.

If I were to replace the line definition with an arrow component, it should display an arrow similar to the one in the image. This seems like a straightforward request, but so far I haven't come across any methods that fulfill this requirement.

javascriptcssreactjssvg

Answer №1

To create a custom arrow for the <hr> element, you can use the ::after pseudo-element:

const CustomHR = () => <hr className='customHR' />;

ReactDOM.render(<CustomHR />, document.getElementById("react"));
.customHR { 
   margin-top: 50px;
   width: 80%;
   border: 1px solid black;
}

.customHR::after {
    content: '';
    position: absolute;
    right: 10%;
    display: block;
    border-right: 3px solid;
    border-bottom: 3px solid;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer №2

An easy fix using SVG:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to retrieve the tagName attribute when clicking in JavaScript

I am trying to extract the tagName of any element within an iframe when it is clicked. Unfortunately, my JavaScript code is not working as expected. As a beginner in JavaScript, I would appreciate some guidance on where I might be going wrong. <div cl ...

javascripthtml

three.js LambertMeshMaterial

Hello everyone: I've noticed that my models using MeshLambertMaterial are consuming approximately 1.6GB of memory, exceeding the capabilities of a 32-bit Chrome browser. Switching to Basic Material drops the memory consumption to around 456mb, but the ...

javascriptthree.js

Using Jquery to manipulate arrays based on options selected from a dropdown menu

I am currently working on a feature that suggests tags based on the selected category. This involves using a select box to choose a category and then displaying sub-categories in a list. Here is the current setup: <select id="categorySelect"> < ...

javascriptjqueryarrays

Adding items to an array within a jQuery each loop and performing a jQuery ajax request

I am trying to loop through an array, push the results into a JavaScript array, and then access the data outside of each loop and AJAX call. Can anyone explain how to do this? This is what I have attempted: var ides = ["2254365", "2255017", "2254288", ...

javascriptjqueryarraysajax

Utilizing server-side variables with JavaScript in Node.js, Express.js, and EJS

Hello everyone, I am just getting started with backend programming and I'm currently working on a project where I need to send an array of objects to the client. My goal is for the client to then add an object to this array. I am using node.js in conj ...

javascriptnode.jsexpressejs

Getting the name and value from an object

Just starting out with Javascript and Nodejs, using express and making a call to the following link: localhost:7080/v1/movies/order/notify/insert?breed=Whippet&age=10 After that, I am attempting to extract the property name along with its correspon ...

javascriptnode.jsexpress

Maximizing the potential of Next JS 13 Server Components

Exploring the updates in Next JS 13, I have found it intriguing that every component is now a server component by default. This concept has been puzzling for me as I try to grasp how to effectively leverage this feature. For instance, my current challenge ...

javascriptreactjsnext.jsserverreact-query

Troubleshooting React and Material-UI: Adjusting <slider> component for use with personalized data

I am facing a challenge with using the Material-UI slider to showcase API data. The unique aspect here is that the slider is intended for displaying data without any interactivity. Encountering an error message: Slider.js:91 Uncaught TypeError: nearest.to ...

javascriptreactjsmaterial-ui

Tips for adjusting the color of a linear gradient in a shimmer effect

I have a puzzling question that I just can't seem to solve. My goal is to display a shimmer effect on cards as a temporary placeholder until the actual content loads. I found some CSS code in this answer, but when I tried it with a dark background, t ...

css

Utilizing web components in React by solely relying on a CDN for integration

I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...

javascripthtmlreactjstypescriptweb-component

Retrieving user input in React by utilizing the onChange event handler

I have been tasked with creating a Quiz App and I am currently working on building it. The app consists of several components such as "question", "question-list", and "add-question". Within the "add-question" component, there is a form that allows users ...

javascriptreactjsforms

Implementing JSON web tokens on the client side using Node.jsHere are the steps to implement

I have been developing a Node.js express application with JWT for authentication to secure access to my admin page. While testing my routes using Postman, everything works smoothly on the server side. However, I am facing a challenge on the client side in ...

javascriptnode.jsexpressjwt

Changing in height by utilizing javascript's style.height animation

When attempting to adjust the height property using JavaScript instead of jQuery, a challenge arises. The issue lies in the inability to reset the height back to zero after setting it to the scrollHeight of the element. The following is the JavaScript cod ...

javascripthtmlcss

SyntaxError: Identifier was not expected

I am currently working on a function that involves a table of rows with edit buttons. Whenever the edit button is clicked, the following function is called and I encounter this error: Uncaught SyntaxError: Unexpected identifier The error seems to be poin ...

javascriptphphtml

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui

React Native does not support Laravel Echo's listenForWhisper functionality

I have successfully implemented private channels and messaging in my Laravel App using websockets:serve. Now, I am attempting to enable whisper functionality for the typing status but encountering some issues. When sending a whisper: Echo.private('c ...

javascriptreactjslaravelreact-native

Retrieving data values using the Fetch API

When utilizing the following code, I encounter an issue where I am able to render data fetched from an API, but face an error when attempting to store the value of a fetched field in a variable: //get data api - Global data const [globalData, setGl ...

reactjsfetch-apiuse-effect

I'm experiencing an issue with my website where it appears broken when I build it, but functions properly when I use npm run dev in Next

For my project, I have utilized NextJs, Tailwind, React, and Typescript. It is all set and ready to be hosted. After using "output: export" in next.config.js and running npm run build, the process was successful. However, when viewing my website locally, I ...

reactjstypescriptnext.jstailwind-css

Tips for generating automatic views in Backbone without manual instantiation

Is there a more efficient way to instantiate the view rather than directly below the definition? var BVApp = Backbone.View.extend({ Name: 'BVApp', // do chonka stuff }); $A.Class.add(new BVApp()); ...

javascriptbackbone.js

What is the best way to use Jquery ScrollTo() to navigate to an element on a page using a class selector

Building on the information from this source, I have a question: How can I resolve the same issue using a class selector like $('.class')? I am encountering an error message that says Uncaught TypeError: undefined is not a function This occurs ...

javascriptjqueryscrollto