Read only view about react-tags HOT 21 CLOSED

looks like this feature is now in the library and this should be closed?

from react-tags.

You can try passing null to removeComponent prop if you do not want to show deletex.

from react-tags.

I tried but didn't work. Maybe i did it wrong?

<ReactTags tags={tags} suggestions={suggestions} removeComponent={null} handleDelete={this.handleDelete} handleAddition={this.handleAddition} handleDrag={this.handleDrag} />

from react-tags.

try using empty <span/> tag like this

<ReactTags tags={tags} suggestions={suggestions} removeComponent={<span/>}
    handleDelete={this.handleDelete} handleAddition={this.handleAddition}
    handleDrag={this.handleDrag} />

from react-tags.

That gave me errors.

Warning: Failed propType: Invalid propremoveComponentof typeobjectsupplied toReactTags, expectedfunction. Check the render method ofDragDropContext(ReactTags).

from react-tags.

removeComponent must be a function, according to the src;

So use () => <span/> instead

from react-tags.

this works but i still need a view only mode, meaning the input field needs to go away (i prefer not have to add css to do this).

removeComponent = () => <span/>; <ReactTags tags={tags} suggestions={suggestions} removeComponent={this.removeComponent} handleDelete={this.handleDelete} handleAddition={this.handleAddition} handleDrag={this.handleDrag} />

from react-tags.

OK I'll try putting up a PR for it.

from react-tags.

Thanks! It be great just to have a easy flag to set to make it all read only (no delete x and input), as this is a real use case, where i show tags that does not allow for edit.

from react-tags.

Added in #49

from react-tags.

I did a npm update, and i think i got the latest, as i was able to add the new prop but did not see the readonly mode kick in.

from the call:
// INIT FAKE DATA
`const fakeData = {
tags: [{ id: 1, text: 'Apples' }],
suggestions: ['Banana', 'Mango', 'Pear', 'Apricot', 'Peach', 'Strawberry'],
};

const options = {
readOnly: true,
};
const elementTable = < TagList data={fakeData} options={options} />;

render(elementTable, compNode);`

inside of my component wrapper of ReactTags <ReactTags tags={tags} suggestions={suggestions} handleDelete={this.handleDelete} handleAddition={this.handleAddition} handleDrag={this.handleDrag} readOnly={this.props.options.readOnly}/>

from react-tags.

maybe bump the version and re-publish?

from react-tags.

If you require it urgently, you can change your package.json as follows

"react-tag-input": "prakhar1989/react-tags"

and run npm update

from react-tags.

Interesting. When can i get it through a regular update? I thought the PR
was approved and merged, no?

On Mon, Feb 29, 2016 at 4:57 PM, Vivek Kumar Bansal <
[email protected]> wrote:

If you require it urgently, you can change your package.json as follows

"react-tag-input": "prakhar1989/react-tags"

and run npm update

Regards,
-Long Huynh

from react-tags.

@prakhar1989 Just did it

from react-tags.

I see. :)
I thought it was approved, as you updated the readme.

Regards,
-Long Huynh

On Mon, Feb 29, 2016 at 5:13 PM, Vivek Kumar Bansal <
[email protected]> wrote:

depends on @prakhar1989 https://github.com/prakhar1989

—
Reply to this email directly or view it on GitHub
#46 (comment)
.

from react-tags.

@prakhar1989 Just did it

from react-tags.

Yeah I saw. Lol. Thanks man. This is great.
On Feb 29, 2016 5:18 PM, "Vivek Kumar Bansal" [email protected]
wrote:

@prakhar1989 https://github.com/prakhar1989 Just did it

—
Reply to this email directly or view it on GitHub
#46 (comment)
.

from react-tags.

Got it now! Works like a charm. Only thing i would comment on is when it's
readOnly mode, the drag-n-drop is disabled but i still get a cross mouse
icon on hovering. We might want to take that out too so it's not confusing.
Else perfect. Thanks!

Regards,
-Long Huynh

On Mon, Feb 29, 2016 at 5:21 PM, Long Huynh [email protected] wrote:

Yeah I saw. Lol. Thanks man. This is great.
On Feb 29, 2016 5:18 PM, "Vivek Kumar Bansal" [email protected]
wrote:

@prakhar1989 https://github.com/prakhar1989 Just did it

—
Reply to this email directly or view it on GitHub
#46 (comment)
.

from react-tags.

Running into an issue with the readOnly feature: page breaks unless we explicitly set autofocus to false.

edit: see PR #53

from react-tags.

Thanks for pointing this out @tommoor.

from react-tags.