Closed poonam-tru closed 2 years ago
Please refer to the roadmap here which shows this feature as not yet complete.
As explained further down in that issue I have implemented most of the code required and the docs too but I've not yet written any tests. I've got a few weeks off coming up so I plan on finishing this feature during that time.
@poonam-tru I've published v7.0.0-beta.7 which exposes 3 new props: renderLabel
, renderOption
and renderTag
. As mentioned previously they are not tested and they are not documented but now you can use them. Below is the documentation which I plan publish when the features are ready but you can also refer to the default implementations in the source code:
Optional custom label component to render. Receives the label text as children, required label attributes, and classNames
as props. Defaults to null
.
function CustomLabel({ children, classNames, ...labelProps }) {
return (
<div className={classNames.label} {...labelProps}>
{children}
</div>
)
}
Optional custom option component to render. Receives the pre-rendered option text as children, option object, required option attributes, and classNames
as props. Defaults to null
.
function CustomOption({ children, classNames, option, ...optionProps }) {
const classes = [
classNames.option,
option.active ? 'is-active' : '',
option.selected ? 'is-selected' : ''
]
return (
<div className={classes.join(' ')} {...optionProps}>
{children}
</div>
)
}
Optional custom tag component to render. Receives the selected tag object, required tag attributes, and classNames
as props. Defaults to null
.
function CustomTag({ classNames, tag, ...tagProps }) {
return (
<button type="button" className={classNames.tag} {...tagProps}>
<span className={classNames.tagName}>{tag.label}</span>
</button>
)
}
Ok, Superb!
On Fri, Sep 23, 2022 at 11:19 PM Matt Hinchliffe @.***> wrote:
@poonam-tru https://github.com/poonam-tru I've published v7.0.0-beta.7 https://www.npmjs.com/package/react-tag-autocomplete/v/7.0.0-beta.7 which exposes 3 new props: renderLabel, renderOption and renderTag. As mentioned previously they are not tested and they are not documented but now you can use them. Below is the documentation which I plan publish when the features are ready but you can also refer to the default implementations in the source code:
renderLabel (optional)
Optional custom label component to render. Receives the label text as children, required label attributes, and classNames <#m_5724452388212592158_classNames-optional> as props. Defaults to null.
function CustomLabel({ children, classNames, ...labelProps }) { return ( <div className={classNames.label} {...labelProps}> {children}
renderOption (optional)
Optional custom option component to render. Receives the option, pre-rendered option text as children, required option attributes, and classNames <#m_5724452388212592158_classNames-optional> as props. Defaults to null.
function CustomOption({ children, classNames, option, ...optionProps }) { const classes = [ classNames.option, option.active ? 'is-active' : '', option.selected ? 'is-selected' : '' ]
return ( <div className={classes.join(' ')} {...optionProps}> {children}
renderTag (optional)
Optional custom tag component to render. Receives the selected tag, required tag attributes, and classNames <#m_5724452388212592158_classNames-optional> as props. Defaults to null.
function CustomTag({ classNames, tag, ...tagProps }) { return ( <button type="button" className={classNames.tag} {...tagProps}> {tag.label} )}
— Reply to this email directly, view it on GitHub https://github.com/i-like-robots/react-tag-autocomplete/issues/8#issuecomment-1256506007, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEATGODH5QRQN6ZGAEGK7TV7XURNANCNFSM6AAAAAAQS6YCTY . You are receiving this because you were mentioned.Message ID: @.***>
Hey, Is there any option to clear all the suggestions from the input of react tag?
Case: I have a delete all button, I want to delete all suggestions on click that button. Case: I am using the react tag in map loop.
On Mon, Sep 26, 2022 at 4:39 PM Poonam Saini @.***> wrote:
Ok, Superb!
On Fri, Sep 23, 2022 at 11:19 PM Matt Hinchliffe @.***> wrote:
@poonam-tru https://github.com/poonam-tru I've published v7.0.0-beta.7 https://www.npmjs.com/package/react-tag-autocomplete/v/7.0.0-beta.7 which exposes 3 new props: renderLabel, renderOption and renderTag. As mentioned previously they are not tested and they are not documented but now you can use them. Below is the documentation which I plan publish when the features are ready but you can also refer to the default implementations in the source code:
renderLabel (optional)
Optional custom label component to render. Receives the label text as children, required label attributes, and classNames <#m_1524569444360665564_m_5724452388212592158_classNames-optional> as props. Defaults to null.
function CustomLabel({ children, classNames, ...labelProps }) { return ( <div className={classNames.label} {...labelProps}> {children}
renderOption (optional)
Optional custom option component to render. Receives the option, pre-rendered option text as children, required option attributes, and classNames <#m_1524569444360665564_m_5724452388212592158_classNames-optional> as props. Defaults to null.
function CustomOption({ children, classNames, option, ...optionProps }) { const classes = [ classNames.option, option.active ? 'is-active' : '', option.selected ? 'is-selected' : '' ]
return ( <div className={classes.join(' ')} {...optionProps}> {children}
renderTag (optional)
Optional custom tag component to render. Receives the selected tag, required tag attributes, and classNames <#m_1524569444360665564_m_5724452388212592158_classNames-optional> as props. Defaults to null.
function CustomTag({ classNames, tag, ...tagProps }) { return ( <button type="button" className={classNames.tag} {...tagProps}> {tag.label} )}
— Reply to this email directly, view it on GitHub https://github.com/i-like-robots/react-tag-autocomplete/issues/8#issuecomment-1256506007, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOEATGODH5QRQN6ZGAEGK7TV7XURNANCNFSM6AAAAAAQS6YCTY . You are receiving this because you were mentioned.Message ID: @.***>
v7.0.0-beta.9 now includes the documentation for the render props.
Can you please let me know, how can i add own custom ui component as prop in V7 beta. As currently the behaviour is , on click tag anywhere it is deleted. As I want to delete tag, only click via delete icon.