Unable to add custom tag ui

poonam-tru commented 2 years ago

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.

i-like-robots commented 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.

i-like-robots commented 2 years ago

@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:

renderLabel (optional)

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>
  )
}

renderOption (optional)

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>
  )
}

renderTag (optional)

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>
  )
}

poonam-tru commented 2 years ago

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}

poonam-tru commented 2 years ago

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}

i-like-robots commented 2 years ago

v7.0.0-beta.9 now includes the documentation for the render props.

i-like-robots / react-tag-autocomplete