I'm using primereact and according to there website this is how they change there icon size.
However this doesn't work in jsx as it won't let you directly reference style without it being an object.
Are there any workarounds to this?
EDIT: Code for Button where icon is nested in below:
<Button
label=""
icon="pi pi-cog"
className="cogIcon"
onClick={(e) => this.setState({visibleRight:true})}
style={{marginTop:'.25em', marginRight:'.25em'} }
/>
In the link you provide, they have an example
<i class="pi pi-check" style="font-size: 3em"></i>
Just add fontSize: 3em (or the size you want).
<Button
label=""
icon="pi pi-cog"
className="cogIcon"
onClick={(e) => this.setState({visibleRight:true})}
style={{marginTop:'.25em', marginRight:'.25em', fontSize: '3em'} }
/>
Related
I have a following button which is connected to recaptcha according to docs
<Button
onClick={() => setShowSpinner(true)}
size="lg"
className="g-recaptcha"
data-sitekey="XYZ"
data-callback="handleFormSend"
data-action='submit'
>
{showSpinner && <Spinner
as="span"
animation="grow"
size="sm"
role="status"
aria-hidden="true"
/>}
Send
</Button>
I don't understand why in chrome I got
"Warning: Did not expect server HTML to contain a <div> in <form>."
Of course I checked HTML code and don't see any div? In Mozilla there is no warning.
I use next and react.
What may be wrong?
Looks like a SSR/hydration issue. Try removing spaces between tags.
<Button
onClick={() => setShowSpinner(true)}
size="lg"
className="g-recaptcha"
data-sitekey="XYZ"
data-callback="handleFormSend"
data-action='submit'
>
{showSpinner &&
<Spinner
as="span"
animation="grow"
size="sm"
role="status"
aria-hidden="true"
/>
}
Send
</Button>
Check this answer
I wanted to follow like a todo list. Something just like in the picture below.
Right now, the problem with my code is that, its working differently.
I wanted only one input that renders a list of divs instead of input fields.
Exactly just like in the picture below:
Pls check my codesandbox here
CLICK HERE
<FieldArray
name="todos"
render={(arrayHelpers) => (
<div>
{formik.values.todos.map((friend, index) => (
<div key={index} style={{ display: "flex", gap: "1rem" }}>
<input
name={`todos[${index}].name`}
value={formik.values.todos[index].name}
onChange={formik.handleChange}
/>
<button
disabled={formik.values.todos?.length === 1}
type="button"
onClick={() => arrayHelpers.remove(index)}
className="deleteButton"
>
Remove
</button>
</div>
))}
<button
type="button"
onClick={() => arrayHelpers.push({ name: "" })}
>
Add
</button>
</div>
)}
/>
Here is a very simple and rude approach - I used Formik my project some time ago and I'm pretty sure it's not perfect but this is exactly what you need.
So some details.
do not render input for every item in your list, you need only render it's value and element with delete handler
you need only one controlled input and it's value is used for name field in your todos. State is cleaned when you click Add button.
you need to render your element only if formik.values.todos.lenght > 0
you need to disable Delete button when formik.values.todos.lenght === 1
Add button should be disabled when newValue.lenght === 0
Piece a cake, right?
I want to create a button component like this:
function Button ({ color }) {
return (
<button className={`hover:bg-${color}-300 bg-${color}-100>
</button>
That way I can make all of my button colors (with hover variant) consistent by just doing:
<Button color="green" >
</Button>
The problem is that purge doesn't see that I want a green button so no styling occurs when I use purge.
Is there a better way to create my button component that will comply with CSS purge?
css get the the classes as them write in components but for this issue you need to use
safelist: [{ pattern: /bg-(red|green|blue|sky)-(500)/, }, ],
in tailwind.config to make them extract all time.
I ended up doing this:
<button type={type} title={title} disabled={disabled} className={`
active:drop-shadow-3xl
select-none
font-mono
font-bold
m-1.5
p-1.5
active:translate-y-[2px]
border-2
border-gray-400
rounded-md
${className}`}
onClick={click}>
{children}
</button>
and then add whatever inside of ${className}. its not a great answer but it is how I did it
I have a search field that shows data as dropdown.item when user is typing. The library is React Bootstrap (bootstrap 5). This is working great. The dropdown is showing. The problem is that the dropdown persist when clicking outside or navigating to a new link. The dropdown is in a header that does not get rerendered with the rest of the page. Using NextJS. Any tips on how to close a dropdown that has no toggle?
<form className="d-none d-sm-inline-block" style={{ zIndex: "1000" }}>
<div className="input-group input-group-navbar">
<input
type="text"
className="form-control"
placeholder="Søk"
aria-label="Search"
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
<button className="btn" type="button">
<Icon.Search className="align-middle" />
</button>
</div>
{searchData.length >= 1 && (
<Dropdown style={{ position: "absolute", background: "white" }} autoClose="outside">
{searchData.slice(0, 10).map((element, index) => {
return (
<Link key={element.agressoResourceId} href={`employees/69918`} passHref replace={true}>
<Dropdown.Item>
{element.firstname} - {element.lastname}
</Dropdown.Item>
</Link>
);
})}
</Dropdown>
)}
</form>
The solution was to use onBlur event and hide the dropdown. The problem comes with the onblure is triggered before you press the item. The solution here was to use a setTimeout of 200ms.
I want to know how can I open the directory to upload a file using an IconButton?
<IconButton
iconClassName="fa fa-plus-square"
onClick={(e) => e.stopPropagation()}
type='file'
/>
using the code below shows the icon button and another button for the upload file
<IconButton iconClassName="fa fa-plus-square" onClick={(e) => e.stopPropagation()}>
<input type="file type='file'>
</IconButton>
I think the standard way from material ui examples:
<input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
<IconButton color="primary" className={classes.button} component="span">
<PhotoCamera />
</IconButton>
</label>
A few things:
You don't need type='file' on the IconButton, just on the input
IconButton does not expect its children to be anything other than an SVGIcon, so I recommend that you use a regular button
I wouldn't call stopPropagation in this case
You have a typo in your type prop for the input. You have type="file type='file'. It should just be type="file"
So, putting that all together:
<FlatButton label="Choose file" labelPosition="before">
<input type="file" style={styles.exampleImageInput} />
</FlatButton>
If you still want it to be an icon rather than a button, I suspect you can do something with <input> or add it as the children to FlatButton with no label.
You can achieve the same with IconButton using the following code:
<IconButton onClick={() => this.fileUpload.click()}>
<FontIcon className="material-icons" >
add_a_photo
</FontIcon>
</IconButton>
<input type="file" ref={(fileUpload) => {
this.fileUpload = fileUpload;
}}
style={{ visibility: 'hidden'}} onChange={this.groupImgUpload} />