Use this tag for questions about the React-based Mantine components and hooks library.
Questions tagged [mantine]
126 questions
0
votes
1 answer
Is there a way to add a personal icon on Select ( Mantine)- not an image from Tabler Icons
I am new on Mantine and I`m trying to do a Search Component. In stead of using an image from tabler icons as is present in the mantine examples, I want to add a picture from my assets.
This is what I`ve tried
import { ReactComponent as SearchIcon }…
0
votes
1 answer
Radio | Is there a way how to align an icon horizontally using just props, without styles
Is there a way how to align an icon horizontally using just props, without styles
Code - https://codesandbox.io/s/smoosh-hill-nr230p?file=/src/App.js:113-349
There you go:
export default function App() {
return (
…
HackerMF
- 475
- 7
- 18
0
votes
0 answers
How can I change the width of the image that comes from sanity blockcontent
I am using Mantine, Next.js and Sanity. I can't change the width or height well I can't customize the image.
Here is my code.
function SinglePost({ post }: Props) {
const { classes } = useSinglePostStyles();
const serializers = {
types: {
…
anne
- 1
0
votes
0 answers
Unable to add an image/icon to Select options - Dash Mantine Components
I'm new to mantine components for Dash in Python, and I'm trying to use the Select component to show different options with an icon in the left, as I previously did with the component Dropdown of dash components.
I have decided to use the Select…
Juanjo Méndez
- 1
- 1
0
votes
1 answer
Determine Yup schema validation based on ancestor properties
I'm looking to effectively do a .when('ancestor.prop.foo.bar' ....) style validation with yup. My schema is a very large/complex data model, and a lot of fields have their validations controlled by top level/nested attributes.
(side note: using…
iamaword
- 1,327
- 8
- 17
0
votes
1 answer
Toggle icons in react after iterating through Object and update the form
I have a form with a social object, I want to add an icon to the social notification that has a boolean value and also want to toggle the icon and update the form.
export default function UserProfile(props) {
const…
Somdotta Sarkar
- 95
- 6
0
votes
1 answer
How can i use the Mantine UI template in react js its saying INTERFACE is a reserve word How do i change that?
How can i use the Mantine UI template in react js its saying INTERFACE is a reserve word How do i change that ?
I want to use the Mantine template from the official website but not every template works some that Have the INTERFACE function on them…
Hashim Aliyu Hashim
- 55
- 5
0
votes
1 answer
DASH (by plotly-python) MATCH selector not working, while ALL selector working fine
from dash import Dash, Input, Output, State, ALL, MATCH, ctx
from dash import html, dcc
import dash_mantine_components as dmc
app = Dash(__name__, prevent_initial_callbacks=True)
app.layout = \
html.Div(id='container', children=[
…
abhay patil
- 81
- 5
0
votes
1 answer
Responsive Header Implementation in Mantine (React)
I'm new to React (especially Typescript) and I was wondering how to pass these interface props correctly to this Navbar component in my main App?
interface HeaderResponsiveProps {
links: { link: string; label: string }[];
}
export default function…
kcrutch
- 1
- 2
0
votes
0 answers
Resetting a number input to a specific value if edit permission is false
jaal kamza
- 213
- 4
- 12
0
votes
1 answer
Render single component on hover
I currently have two avatars that are rendered on a page. On hover I want a card to pop up that displays player information.
Currently when hovering on the first avatar both player cards pop up and i only want the card of the avatar that is hovered…
meWho
- 129
- 1
- 8
0
votes
0 answers
Validation for multi-step form
I am trying to make a multi-step form using that checks if the first two input fields are valid before moving on the the next step. The code below validates the two fields, but continues to the next step regardless if the forms are valid or not. I…
smartish
- 31
- 5
0
votes
1 answer
Load Mantine MultiSelect data when dropdown first opened
I'd like to use Mantine's MultiSelect but only fetch from the server the dropdown data the first time users open the dropdown.
Most obvious candidate seems to be the onDropdownOpen where I could fetch the data but I don't know how to reference the…
Johann
- 12,158
- 11
- 62
- 89
0
votes
1 answer
Prevent keys that are not the enter key from triggering submit function
I am using a react components system(mantine). I have a select field and I want to select an option with any key and submit using the enter key only.
The problem right now is that once the dropdown appears and I press any key it calls the function…
blockhead
- 364
- 3
- 18
0
votes
3 answers
Getting API with useEffect, inside a handle change function
I'm using the YTS API and I need to change the link for the call, I have to use
?query_term= and add the text that the user is typing, for autocomplete. I'm using mantine components for the autocomplete. I tried putting the call inside the…
Tom Hugin
- 63
- 1
- 7