Nifty Pony Merchandise

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

    1.0.1 • Public • Published

    KVEditor

    License

    React key/value UI component.

    usage

    Setup

    yarn

    Run Example

    yarn start

    Build

    # development
    yarn build
    # production
    yarn build:prod

    Usage

    Simple usage

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

    Advanced usage

    const App = ({ darkTheme }: { darkTheme: boolean }) => {
      const defaults = [
        { key: 'product', value: 'T-Shirt', options: { immutable: true } },
        { key: 'price', value: '$50.95', options: { fixed: true } },
        { key: 'link', value: 'https://www.example.org' }
      ];
    
      const onChange = (values) => {
        console.log(values);
      };
    
      return (
        <div>
          <KVEditor
            defaults={defaults}
            onChange={onChange}
            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/@tag0/kveditor/dist/icons folder to your public folder to be able to use icons.

    Props:

    All props are optional. You should either use defaults or rawObject. Component has internal state to keep key/value changes therefore you can use defaults only the first time.

    • defaults { key: string; value: any; options: KVItemOptionsType }: Default values and options for the key/value editor.
    • 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

    Install

    npm i @tag0/kveditor

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    142 kB

    Total Files

    16

    Last publish

    Collaborators

    • erhangundogan