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

react-editext

v6.0.0

Published

Editable Text Component for React Applications

Downloads

15,620

Readme

react-editext

Editable Text Component for React Applications

NPM npm Github codecov Quality Gate Status Github All Contributors

This project is generated from react-typescript-library template.

Install

npm install --save react-editext

Or with yarn:

yarn add react-editext

Usage

EdiText is highly customizable. You can see more examples here. Here is a basic usage:

import React, { useState } from 'react';

import EdiText from 'react-editext';

function Example(props) {
  const [value, setValue] = useState('What is real? How do you define real?');

  const handleSave = (val) => {
    console.log('Edited Value -> ', val);
    setValue(val);
  };
  return (
    <div className="container">
      <EdiText type="text" value={value} onSave={handleSave} />
    </div>
  );
}

There is also a codesandbox template that you can fork and play with it:

Edit react-editext-template

You can customize almost everything based on your needs. Please navigate to Props section. I mean, just scroll down.

Props

| Prop | Type | Required | Default | Note | | ---------------------- | ------------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | value | string | Yes | | Value of the content and input [in edit mode] | | onSave | function | Yes | | Function will be called when save button clicked. value and inputProps are passed to cb. | | type | string | No | text | Input type. Possible options are: text, password, number, email, textarea, date, datetime-local, time, month, url, week, tel | | hint | node | No | '' | A simple hint message appears at the bottom of input element. Any valid element is allowed. | | inputProps | object | No | | Props to be passed to input element. Any kind of valid DOM attributes are welcome. | | viewProps | object | No | | Props to be passed to div element that shows the text. You can specify your own styles or className | | containerProps | object | No | | Props to be passed to div element that is container for all elements. You can use this if you want to style or select the whole container. | | editButtonProps | object | No | | Props to be passed to edit button. | | validation | function | No | | Pass your own validation function. takes one param -> value. It must return true or false | | validationMessage | node | No | Invalid Value | If validation fails this message will appear | | onValidationFail | function | No | | Pass your own function to track when validation failed. See Examples page for the usage. | | onCancel | function | No | | Function will be called when editing is cancelled. value and inputProps are passed as params. | | saveButtonContent | node | No | '' | Content for save button. Any valid element is allowed. Default is: ✓ | | cancelButtonContent | node | No | '' | Content for cancel button. Any valid element is allowed. Default is: ✕ | | editButtonContent | node | No | '' | Content for edit button. Any valid element is allowed. Default is: ✎ | | saveButtonClassName | string | No | | Custom class name for save button. | | cancelButtonClassName | string | No | | Custom class name for cancel button. | | editButtonClassName | string | No | | Custom class name for edit button. | | viewContainerClassName | string | No | | Custom class name for the container in view mode.See here | | editContainerClassName | string | No | | Custom class name for the container in edit mode. Will be set to viewContainerClassName if you set it and omit this. See here | | mainContainerClassName | string | No | | deprecated. Custom class name for the top-level main container. See here | | hideIcons | bool | No | false | Set it to true if you don't want to see default icons on action buttons. See Examples page for more details. | | buttonsAlign | string | No | after | Set this to before if you want to locate action buttons before the input instead of after it. See here. | | editOnViewClick | bool | No | false | Set it to true if you want clicking on the view to activate the editor. | | editing | bool | No | false | Set it to true if you want the view state to be edit mode. | | onEditingStart | function | No | | Function that will be called when the editing mode is active. See here | | showButtonsOnHover | bool | No | false | Set it to true if you want to display action buttons only when the text hovered by the user. See here | | submitOnEnter | bool | No | false | Set it to true if you want to submit the form when Enter is pressed. Be careful if you have multiple instances of <EdiText/> on the same page. | | cancelOnEscape | bool | No | false | Set it to true if you want to cancel the form when Escape is pressed. See here | | cancelOnUnfocus | bool | No | false | Set it to true if you want to cancel the form when clicked outside of the input. See here | | submitOnUnfocus | bool | No | false | Set it to true if you want to submit the form when clicked outside of the input. See here | | startEditingOnFocus | bool | No | false | Activates the edit mode when the view container is in focus. See here | | startEditingOnEnter | bool | No | false | Activates the edit mode when the Enter key is pressed. See here | | tabIndex | number | No | | An helper shortcut in case you want to pass the same tabIndex to both viewProps and inputProps. | | renderValue | function | No | | Custom render method for the content in the view mode.Use this prop to customize the displayed value in view mode. See here | | canEdit | function or boolean | No | true | A function or boolean prop that returns a boolean. If it returns true the input will be editable. If it returns false the input will be read-only. |

Styling with styled-components

You can style your <EdiText/> components with styled-components or similar libraries. You can either target internal HTML elements by their type ( or order) , or you can select them by attribute values.

Each customizable HTML element has a editext=xxx attribute. Use below as a reference table:

| Attr. Value | Description | | ---------------------- | -------------------------------------------------------------------------------- | | main-container | the main container | | view-container | the container in view mode | | edit-container | the container in edit mode | | button-container | the container for the save and cancel buttons | | validation-container | the container for validation message area | | edit-button | use this to style the edit button | | save-button | use this to style the save button | | cancel-button | use this to style the cancel button | | input | There is only one input. You can select it directly or just use this attr value. | | hint | To style the hint container. |

Usage:

button[editext='cancel-button'] {
  &:hover {
    background: crimson;
    color: #fff;
  }
}

div[editext='view-container'] {
  background: #6293c3;
  padding: 15px;
  border-radius: 5px;
  color: #fff;
}

div[editext='validation-container'] {
  color: #d3d3d3;
  text-decoration: underline;
}

input,
textarea {
  /** or input[editext="input"] {} */
  background: #1d2225;
  color: #f4c361;
  font-weight: bold;
  border-radius: 5px;
}

See the example code.

Browser Support

| Chrome | Firefox | Safari | iOS Safari | Opera | Edge | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |

Development

With Nix

nix-shell --pure
develop

This will start a tmux session for both library and example app.

Without Nix

Install dependencies and start the rollup watch process.

yarn install
yarn start

Navigate to example/ folder and repeat the above steps.

cd example
yarn install
yarn start

Now open http://localhost:3000/ in your browser.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © alioguzhan