Is there a way to create circle and square shapes in React with custom text inside, without relying on SVG images? Check out this example: https://i.sstatic.net/iHZgy.png
I attempted the code below but it did not render any shapes:
import React from 'react';
export default function Circle(){
return(
<div height="110" width="500">
<circle
cx="50"
cy="55"
r="45"
fill="none"
stroke="#F0CE01"
strokeWidth="4"
/>
</div>
);
}
If you want to create a circular shape, you can achieve that using a simple div tag with the addition of the border-radius property.
For a practical example in React, check out this sandbox: https://codesandbox.io/s/shapes-qbf1f
Below is a snippet for reference:
.square {
display: flex;
width: 100px;
height: 100px;
background-color: red;
}
.circle {
display: flex;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
.text {
margin: auto;
}<div class="square">
<p class="text">Square text</p>
</div>
<div class="circle">
<p class="text">Circle text</p>
</div>Here's a simple way I achieved this using React
let initials = ("AA");
let color = ("#606060");
const customStyle =
{
display: "flex",
height: "30px",
width: "30px",
borderRadius: "100px",
color: "white",
background: color,
margin: "auto",
marginRight: 5,
marginTop: -4
}
return(
<div style={{display: "flex"}}>
<div style={customStyle}>
<span style={{margin: 'auto'}}>{initials}</span>
</div>
User Profile
</div>
)
After successfully implementing a Google Maps widget, I encountered an issue when trying to toggle its visibility using jQuery. Despite clicking on a div element to reveal the widget, the map fails to load inside the designated container. It seems as tho ...
Looking for guidance on integrating the Mmenu light JS plugin into an Angular 8 project. Wondering where to incorporate the 'mmenu-light.js' code. Any insights or advice would be greatly appreciated. Thank you! ...
In my Express application, I have implemented several routes and a login function. Each user has a balance associated with their data, which is stored in an 'express-session'. However, when the user refreshes the page, I need the balance to be up ...
I have encountered an issue with my MongoDB connection being refused at port 3001. It was working fine previously but suddenly stopped. My database is hosted on MongoDB atlas and I am using MongoDB compass to connect with the link in my code. Despite fol ...
Is there a way to make my toggle sidebar scroll smoothly using jQuery UI? Currently, it has a jerky behavior and I would like it to have a smoother left/right effect. I want the outer shell to slide smoothly just like the inner container does, instead of ...
I have been struggling to find a solution to my problem without resorting to custom CSS classes. I'm wondering if it's possible to achieve what I need using only flex classes. Here is the code for a simple navbar component: <Navbar bg ...
As a newcomer to Node Js, I am struggling to understand why the code below is throwing a syntax error with catch(). I recently updated to Node JS V14. Any assistance would be greatly appreciated. async function demoPromise() { try { let message ...
Looking for suggestions on how to build email templates in React JS with Rails as the backend. Any thoughts? ...
After successfully migrating my project from Angular 7 to Angular 8, I encountered an issue when attempting to run 'ng build prod' which resulted in the following error: ERROR in Error during template compile of 'Ng2CompleterModule' Cou ...
I'm completely new to AngularJS and I am working with an API that returns key-value pairs related to different sports. $scope.sports = { 1: "Soccer", 2: "Tennis", 3: "Basketball" ... }; My challenge is sorting these items by sport name: <ul> ...
Retrieving data through an ajax call and saving it to the state of the component _fetchDataFromServer(){ reqwest({ url: 'http://127.0.0.1:8000/api/example/' , type: 'json' , method: 'get' , contentType: &ap ...
I have encountered an issue where the text content of Material UI components is not being rendered to the final HTML. When looking at the render method of my component, it appears as follows: render() { const panel = this.props.panel; return (< ...
Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...
I've been attempting to insert a new element into my JSON, but I'm struggling to do it correctly. I've tried numerous approaches and am unsure of what might be causing the issue. INITIAL JSON INPUT { "UnitID":"1148", "UNIT":"202B", "Sp ...
When attempting to compress Bootstrap 4 js file using uglify-js, I encountered an error. The error message reads as follows: "Parse error at src\bootstrap\alert.js:1,7 import $ from 'jquery' ERROR: Unexpected token: name ($)". Now I am ...
At my company, we utilize Keycloak for authentication integrated with LDAP to fetch a user object filled with corporate data. However, while working remotely from home, the need to authenticate on our corporate server every time I reload the app has become ...
In my current project, I am working on creating HTML and CSS-based bar representations of percentage values. The structure of the code is as follows: Using HTML: <div class="chart"> <div class="bar" style="width:43%"></div> </div&g ...
I have been working with GWT (Google Web Toolkit) version 2.5.1 and successfully developed a sample application to display the username and password. However, I am now facing challenges in inserting these values into a MySQL database table using JDBC or Hi ...
I have been working on a project that requires displaying currency exchange rates. To achieve this, I initially tried using AngularJS to call another webpage for the exchange rate values, but I encountered issues as AngularJS can only make JSON/Rest URL ca ...
Having my own external website, I am looking to extract data from it. Initially, I used CURL to retrieve the website's content but now I specifically need to extract the TimeStamp of a Facebook page. By inspecting the element on the page, you can find ...