@jswork/react-interactive-list v1.3.9

react-interactive-list

React interactive-list.

installation

npm install -S @jswork/react-interactive-list

usage

1. import css

   @import "~@jswork/react-interactive-list/dist/style.css";
   
   // or use sass
   @import "~@jswork/react-interactive-list/dist/style.scss";
   
   // customize your styles:
   $react-interactive-list-options: ()

2. import js

   import React, { useState } from 'react';
   import ReactInteractiveList from '../../src/main';
   import styled from 'styled-components';
   import '@jswork/next';
   
   const messages = [
     'I wondered why the baseball was getting bigger. Then it hit me.',
     'Police were called to a day care, where a three-year-old was resisting a rest.',
     'Did you hear about the guy whose whole left side was cut off? He’s all right now.',
     'The roundest knight at King Arthur’s round table was Sir Cumference.',
     'To write with a broken pencil is pointless.',
     'When fish are in schools they sometimes take debate.',
     'The short fortune teller who escaped from prison was a small medium at large.',
     'A thief who stole a calendar… got twelve months.',
     'A thief fell and broke his leg in wet cement. He became a hardened criminal.'
   ].map((message, index) => ({ message, index, id: `id_${index}` }));
   
   const Container = styled.div`
     width: 80%;
     margin: 30px auto 0;
   
     button {
       margin-right: 10px;
     }
   
     .actions{
       margin-bottom: 10px;
       background-color: #eee;
       padding: 6px 12px;
       border-radius: 4px;
     }
   
     .react-list {
       border: 1px solid #ddd;
       background-color: #f9f9f9;
       border-radius: 3px;
       margin: 4px auto;
       transition: background-color 0.3s;
       &:hover {
         background-color: #f0f0f0;
       }
     }
     .message {
       border-radius: 1em;
       padding: 6px 12px;
       margin: 0.5em;
       line-height: 1.1em;
       background-color: lightblue;
       transition: background-color 0.3s;
       &:hover {
         background-color: lightcoral;
       }
     }
   `;
   
   export default () => {
     const [items, setItems] = useState(messages);
   
     const template = ({ item, index }, cb) => {
       const idx = index + 1;
       return (
         <div className="message" key={item.id}>
           <button onClick={cb}>DELETE</button>
           <span>
             {idx}.{item.message}
           </span>
         </div>
       );
     };
   
     const templateCreate = (_, cb) => {
       return <button onClick={cb}>Create</button>;
     };
   
     const templateDefault = () => {
       return {
         message: 'New items',
         id: `id_${Math.random()}`
       };
     };
   
     const handleChange = (e) => {
       const { value } = e.target;
       console.log('current items: ', value);
       setItems(value);
     };
   
     return (
       <Container>
         <nav className='actions'>
           <button
             onClick={() => {
               nx.$ilist.event.emit('i1:add');
             }}>
             Add
           </button>
           <button
             onClick={() => {
               nx.$ilist.event.emit('i1:remove', 0);
             }}>
             Remove 0
           </button>
           <button
             onClick={() => {
               nx.$ilist.event.emit('i1:clear');
             }}>
             Empty
           </button>
         </nav>
   
         <ReactInteractiveList
           name="i1"
           harmony
           reverse
           listProps={{ className: 'react-list-x', as: 'section' }}
           items={items}
           template={template}
           templateCreate={templateCreate}
           templateDefault={templateDefault}
           onChange={handleChange}
         />
       </Container>
     );
   };

3. import global.d.ts

/// <reference types="@jswork/react-interactive-list/global.d.ts" />

preview

• https://afeiship.github.io/react-interactive-list/

license

Code released under the MIT license.