npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

text-selection-react

v1.1.8

Published

This module capture selected text and also return the selected HTML

Downloads

414

Readme

Demo

Image of work

text selection react

text selection react module provide the selected text and html on desktop and mobile browser. It also provide the feature to color the selected text/html

Installation

To install this package you have to run

npm install text-selection-react

Real Demo

Link of demo

UPDATE

Now Support Mobile Browser and Can undo selected text

NEXT RELEASE

  1. Improve Remove button style and also add functionality for user to add preffered style to Remove button
  2. Add choise to highlight the selected text or not

Usage

This is a independent module. To use it you don't have to wrap it around any component. You can put it any where in the component or in the file inside render to use this component.


import TextSelector from 'text-selection-react'

    <TextSelector
        events={[
        {
            text: 'Submit',
            handler: this.handler
        }
        ]}
        color={'yellow'}
        colorText={true}
    />

Here In events you can add as many event as you want. like currently i am using only one event then it will be shown as

color :- In color you can add color of you choise

colorText :- if true then it color the selected text

Image of work

so if you click on submit it will change the background of the text into

Image of change background

Mobile View

Image of multi events

Undo selected text Image of multi events

Attribute for Remove/Undo button Image of multi events

you can add as many event as you want in it

like

Image of multi events

this will look like Image of multi events view

Handler

handle will return two params. which are html and text.

Image of return params

Shoutouts

This is written during one of my project in which i have to provide the selected text but i didn't find any library that give you the selected text so i research on it and find this solution uptill now. And will add new function in future as there are many in my mind

Question

if you have any question or want me to add or modify as per your requirement then contact me i will do it for you.

Request

If you like it please give a star on github. Thanks

text selection react

text-selection-react