How to use react-onclickoutside - 10 common examples

//@flow

import React from 'react';
import onClickOutside, { IGNORE_CLASS_NAME } from 'react-onclickoutside';

IGNORE_CLASS_NAME.slice();

// $ExpectError Cannot perform arithmetic operation because string literal `ignore-react-onclickoutside` [1] is not a number.
IGNORE_CLASS_NAME - 1;

// class and const are in same line to make all flow versions unhappy in the same line.
// $ExpectError Cannot call `onClickOutside` because string [1] is incompatible with boolean [2].
class FailComponent extends React.Component&lt;{ preventDefault: string }&gt; {render() {return <div>;}} const FailComponentWithClickOutside = onClickOutside(FailComponent);
;

class A extends React.Component&lt;{a: string, preventDefault: boolean }&gt; {
  render() {
    return this.props.preventDefault ? <div>{this.props.a}</div> : null;
  }
}

const B = onClickOutside(A);</div>

changeCategoryEditMode: _ => dispatch({ type: "CATEGORY_EDITMODE" }),
  addCategory: _ => dispatch(addCategory(_)),
  addNote: (..._) => dispatch(noteSubmit(..._)),
  starChange: _ => dispatch(starFilter()),
  lockChange: _ => dispatch(lockFilter(_)),
  editorReset: _ => dispatch({ type: "RESET_EDITOR" }),
  noteChange: _ => dispatch(noteChange(_)),
  titleChange: _ => dispatch(titleChange(_))
});

// @ts-ignore
export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(onClickOutside(MainForm))
);

return _.find(
      this.props.fields,
      op => op.title === filter.field || op.label === filter.field
    ).name
  }
}
Search.propTypes = {
  fields: PropTypes.object,
  onSearch: PropTypes.func,
  indexedFields: PropTypes.array,
}
Search.contextTypes = {
  intl: PropTypes.object.isRequired,
}

export default onClickOutside(Search)

);
          })
        }
      
    );
  }
}

let mapStateToProps = state => {
  return {
    currentDescFont: state.currentDescFont,
    locale: state.locale,
    currentDescFontSelected: state.currentDescFontSelected
  }
}
export default connect(mapStateToProps)(onClickOutside(DropDownFontSelectorMenu));

'size',
  'color',
  'font',
  'link',
  'image',
  'video',
  'width',
  'height',

  'table',
  'contain',
  'tr',
  'td'
];

export default onClickOutside(Editor);

id={item.id}
                disabled={this.state.disabled}
                tagName="span"
                html={item.title}
                onBlur={this.handleBlur}
                onChange={e => this.props.renameItem(item.id, e.target.value)}
              />
            
          )}
        
      
    );
  }
}

export default onClickOutside(Item);

<li>{datas[key]}</li>
              )
            }
          
        }
      
    );
  }
}

Choices.propTypes = {
  fetchTracks: PropTypes.func.isRequired,
  activeChoiceId: PropTypes.string,
};

export default onClickOutside(Choices);

);
   }
   return (
     <section>
       <button>
         <i></i>
       </button>
       {boardSharingModal}
     </section>
   );
 }
}


export default onClickOutside(BoardSharingDropdown);

return (
      <div>
        {this.renderModal()}
      </div>
    );
  }
}

Modal.propTypes = {
  dispatch: PropTypes.func.isRequired,
  playlists: PropTypes.array.isRequired,
  song: PropTypes.object.isRequired,
  authenticated: PropTypes.bool.isRequired,
};

export default onClickOutside(Modal);

Account Settings
          My Guidebook
          Gift Cards
          Business Travel
          Log Out

        
      
    )

  }


}

export default onClickOutside(UserSettingsDropdown);