No Password Management

    This package has been deprecated

    Author message:

    this package has been deprecated

    @imagemarker/kveditor
    TypeScript icon, indicating that this package has built-in type declarations

    0.6.5 • Public • Published

    KVEditor

    React key/value component library. Supports browser light/dark themes.

    usage

    Setup

    yarn

    Run Example

    yarn start

    Build

    # development
    yarn build
    # production
    yarn build:prod

    Usage

    KVEditor has it's own state and works out of the box without any dependency.

    Simple usage

    import React from 'react';
    import { KVEditor } from '@imagemarker/kveditor';
    
    const App = () => <KVEditor />
    
    export default App;

    Advanced usage

    const App = ({ darkTheme }: { darkTheme: boolean }) => {
      const [items, setItems] = useState([
        { key: 'product', value: 'T-Shirt', options: { immutable: true } },
        { key: 'price', value: '$50.95', options: { fixed: true } },
        { key: 'link', value: 'https://www.example.org' }
      ]);
    
      return (
        <div>
          <KVEditor
            items={items}
            onChange={setItems}
            options={{
              idField: 'id',
              theme: darkTheme ? 'dark' : 'light',
              validateKey: new RegExp(/^[a-zA-Z0-9]*$/)
            }}
          />
        </div>
      );
    };

    You can run example in src/example.tsx file with yarn start.

    You should copy node_modules/@imagemarker/kveditor/dist/icons folder to your public folder to be able to use icons.

    Props:

    All props are optional. You should either use items or rawObject

    • items { key: string; value: any; options: KVItemOptionsType }: If you have existing Key/Value state you can pass it into the component.
    • rawObject { any }: You can pass any object into this and you would get Key/Value state automatically.
    • onChange { function }: When items added/removed/updated this method calls with items.
    • options { object }:
      • idField { string }: If defined adds fixed and immutable key/value. If that field defined already defined it uses existing one.

      • validateKey { RegExp }: Regular expression to validate your keys

      • theme { 'light' | 'dark' }: You can choose between light and dark themes

      • stretchLabels { bool, default: true } sets all key labels to same size

        light theme

        dark theme

    License

    The MIT License

    Please see License File for more information.

    Install

    npm i @imagemarker/kveditor

    DownloadsWeekly Downloads

    6

    Version

    0.6.5

    License

    MIT

    Unpacked Size

    142 kB

    Total Files

    16

    Last publish

    Collaborators

    • erhangundogan