Neptunium, Promethium, Manganese

    react-kindness
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    react-kindness Node CI

    A lightweight, fully-customizable kind screen guide for React

    mini demo

    👉 Demo

    👉 Concept

    To install

    $ npm install --save react-kindness

    Put this somewhere in your component tree,

    import {KindnessPanel, Kindness} from 'react-kindness';
    import 'react-kindness/dist/index.css';
     
    // ...
        <KindnessPanel enabled={this.state.show}
                       onExit={() => this.setState({show: false})} />

    then point out some elements that you want your guests to focus on

    <Kindness>
        <input type="text" {...} />
    </Kindness>
     
    <Kindness message="Click here to submit your post!">
        <button type="submit">Submit</button>
    </Kindness>

    When the <KindnessPanel /> becomes enabled={true}, the screen guide starts.

    Props of <KindnessPanel />

    type SeriesId = string;
     
    type KindnessPanelProps = {|
      enabled: boolean,
      onExit: () => void,
      shape?: 'circle' | 'rect', // 'circle' by default
      initialIndex?: number, // 0 by default
      children?: (KindnessPanelContentArgs) => React.Component,
      seriesId?: SeriesId, // 'default' by default
      onClickOutside?: () => ?boolean, // () => {} by default.
                                       // If false was returned, react-kindness
                                       // tries to disable user interactions.
    |};

    Props of <Kindness />

    type KindnessProps = {|
      children: mixed,
      shape?: 'circle' | 'rect', // Use <KindnessPanel shape={} /> by default and being able to override it
      title?: mixed, // null by default
      message?: mixed, // null by default
      order?: number | 'auto', // 'auto' by default
      seriesId?: SeriesId, // 'default' by default
    |}

    Customizing a panel content

    By default <KindnessPanel /> uses <KindnessPanelContent /> internally. By passing a function as a child, you can customize the content.

    <KindnessPanel enabled={true}>
        {
            ({totalSize, currentIndex, goPrev, goNext}) => (
                <div>
                    <h3>{`This is ${currentIndex + 1} of ${totalSize} item.`}</h3>
                    <button onClick={goPrev}>Go previous</button>
                    <button onClick={goNext}>Go next</button>
                </div>
            )
        }
    </KindnessPanel>

    Properties of the argument is these:

    type KindnessPanelContentArgs = {|
      title: mixed,
      message: mixed,
      totalSize: number,
      currentIndex: number,
      goPrev: () => void,
      goNext: () => void,
      skip: () => void,
      goIndex: (number) => void,
      transitionEmitter: EventEmitter,
    |};

    (wip) Get additional variables from <Kindness />

    When you pass a function to <Kindness /> as a child, you can use additional variables.

    <Kindness>
        { (focused) => <div style={focused && {fontWeight: 'bold'}}>yeah</div> }
    </Kindness>

    Todo

    • When scrolling a spot is something wrong
    • How can I put all into a single root dom
    • Jump to a target with animated-scroll-to
    • Why my popper doesn't flip on viewport boundary
    • 0.3.0 Fancy API for customising
    • 0.4.0 More tests
    • Scroll X
    • onClickOutside of <KindnessPanel />
    • Disabling user interactions onClickOutside
    • feat: <Kindness shape={'circle'|'rect'} /> with smooth spot transition of each
    • mod: Scroll to a target with decent margin even with circle spot
    • Accept a function as a child to <Kindness />

    License

    MIT

    Install

    npm i react-kindness

    DownloadsWeekly Downloads

    0

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    60 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar