I am using Suneditor in reactjs. Now here i want to mention some user name from database while writing description.But i am not able to find any "mention" plugin using suneditor.Is there any way i can implement it using suneditor? Mentioned username will be marked as blue and underlined.Any reference link would be appereciated using suneditor.
<MentionsInput
className="comments-textarea"
placeholder=""
value={this.state.value}
onChange={this.handleChange}
onSelect={this.handleSelection}
onBlur={this.handleBlur}
markup={this.state.markup}
autoFocus
>
<Mention
className="comment-user"
type="user"
trigger="#"
data={this.state.totalUserList}
/>
</MentionsInput>
I have used react mention plugin previously.Can i use it in suneditor with fullfilling above requirement?
Related
I'm using antd for upload file, i'm trying to add capture="environment" like this code <input type="file" accept="image/*" capture="filesystem"> to my code. The code is for open camera only when they access in mobile. How can i implement it in antd Upload ? Here is my code
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
accept="image/x-png,image/jpeg"
>
Antd Upload looks like it would pass on the capture prop to rc-upload (https://github.com/ant-design/ant-design/blob/dc4d85583fe6b12c5a3d8b1a1c9de0589752fc3e/components/upload/Upload.tsx#L380), but rc-upload (which antd relies on here) only just recently added support for that. https://github.com/react-component/upload/pull/303
AntD will need to update dependency, but looks like they already have done that in master, So maybe wait a bit and update to latest antD, Otherwise fork the component and include the updated dependency in your own package.json.
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
accept="image/x-png,image/jpeg"
capture="environment"
>
I'm trying to implement data-live-search in a react project and I'm using react-bootstrap.
Code goes here:
<Form.Control as="select" data-live-search="true" htmlSize="5" custom>
{activities.map(i=>{return <option>{i}</option>})}
</Form.Control>
Everything is working as expected but the search bar is not showing up.
After few searches, I got to know that data-live-search is not available in react-bootstrap.
But we can use react-bootstrap-typeahead instead, which works like charm for me.
I have a simple TextField component from Material UI in React (notice the "required")
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
I love the functionality and appearance of the "required" property. It looks like this when it's activated:
Unfortunately, this property is only available on their TextField component and not the RadioGroup or Select components. If I can at least replicate the appearance (and maybe the fact that it scrolls the page to the location of the input), I can apply it to all of my inputs for a consistent UI.
Does anyone know where they are getting the appearance from? It looks like it may be from a different package. Any help in finding it would be appreciated.
If you are referring to the "Please fill out this field" it looks like this might be a browser specific feature rather than a Material feature... Have you checked other browsers to see if this behaviour is reproducible?
Actually is fairly easy to change the styles for the errors that the different browsers show whenever a form is validated. Here your friend is the Constraint API.
There is an invalid event that will be fired before a form is submitted that checks if the elements that have the required attribute satisfy or not its constrains .
What I normally do is to use the onInvalid event handler and pass a callback where you can get a lot of info about the validation.
For example in event.target.validationMessage you'll see the "Please fill out this field" or the event.target.validity.valid will tell you if the element is valid or not. Bear in mind that you have to preventDefault the event.
e.preventDefault();
setInvalid( e.target.validity.valid );
setMessage( e.target.validationMessage );
This is how I've styled the native HTML errors using the <SnackbarContent /> component from material-ui.
Also, just to mention that CSS has a couple of pseudo elements that will help you to style the input. :invalid and :valid but this has nothing to do with the message itself.
Because this styles inconsistency really bugged me a time ago I created a npm plugin that deals with this for you, pretty-form-error it works with React and at least Angular 1.x.x
This is actually a property of input from vanilla html. Textfield is composed of smaller components and Input is one of the components they use. The required property will trigger the dialog to appear.
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
This snippet will also produce the same message.
I have a weird issue that only occurs when I build my React App and maybe someone can help me to explain what is happening?
I created a form with custom components like this:
<Form>
<Input type="text" name="name" value="">Description</Input>
<Textarea name="name" value="">Message</Textarea>
<Submit>Send Request</Submit>
</Form>
When I run this setup on my localhost, each component have their real name returned when I call child.type.name (like Input, Textarea and Submit), but when I run the exact same structure on my build bundle it returns "t" for each one of them?
UglifyJS via Webpack is taking care of this for you.
If you want to use child.name to identify components, it is better to define displayName and use child.type.displayName
Add this to any React Component via:
static displayName = 'coolComponentName'
I am using Form.Select from Semantic UI React and seeing different behavior based on the OS. I have tested on macOS and Windows and the issue occurs when tag is used inside and not passed as a options prop. Code is as follows -
<Form.Field label='An HTML <select>' control='select'>
<option value='male'>Male</option>
<option value='female'>Female</option>
</Form.Field>
It looks different on the documentation too, here is a link - https://react.semantic-ui.com/collections/form/#shorthand-field-control-html but I am also attaching screenshots -
Chrome on macOS
Safari on macOS
Chrome on Windows
Please let me know if anyone has a solution and I can also open an issue on GitHub repo but thought it will be faster to get a response here.
Edit 1: Added Windows screenshot.
Edit 2: Added 'in Semantic UI React' to the question header.
Those examples are just showing that you can still use native html tags with the child api and field control if there was a reason you were needing to do so. Those html tags do not have any of the Semantic UI class names applied to them when they are rendered into your DOM so they only have the native styling for whatever platform you are on.
I would recommend that you don't render those as native HTML tags unless there is some technical reason you need to. For consistent styling across OS/Browser, using Semantic UI React components will give you the class names you need for consistency. Either of the below will work:
const options = [
{key: 'male', value: 'male', text: 'Male'},
{key: 'female', value: 'female', text: 'Female'},
]
<Form.Field>
<label>A Semantic UI Form.Field and Select component</label>
<Select options={options} search />
</Form.Field>
// or
<Form.Select
label='A Semantic UI Form.Select component'
options={options}
search
/>
Here is a working Codesandbox example.
Solution that #brianespinosa suggested makes the select look same across all the browsers and platforms and also has the search functionality. I found a solution that works for me but I do not know if it is something recommened by the SUIR team. I would like to know their thoughts on this. Here is my solution -
<Form.Field as='select' className="ui dropdown">
<option value='default'>Select your country</option>
{
countries.map(country => {
return (
<option key={country['alpha-2']} value={country['alpha-2']}>
{country['name']}
</option>
)
})
}
</Form.Field>
The only reason I chose this solution is because this allows the user to select options using the keyborad.