https://github.com/andre-araujo/react-clickout

A simple component that triggers a callback function when click out.
https://github.com/andre-araujo/react-clickout

click-out click-out-component clickout react reactjs

Last synced: 4 months ago
JSON representation

A simple component that triggers a callback function when click out.

• Host: GitHub
• URL: https://github.com/andre-araujo/react-clickout
• Owner: andre-araujo
• License: mit
• Created: 2017-09-27T16:48:06.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-07-02T18:17:07.000Z (over 7 years ago)
• Last Synced: 2025-04-03T11:30:12.551Z (9 months ago)
• Topics: click-out, click-out-component, clickout, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 15.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Click Out

[![npm](https://img.shields.io/npm/dt/react-click-out.svg)](https://www.npmjs.com/package/react-click-out)

A simple component that triggers a callback function when click out.

## Usage

Just import `ClickOut` component and pass a `function callback` as `onClickOut` prop.

*Critical change - callback prop renamed to onClickOut*

```javascript

import React, { Component } from 'react';

import ClickOut from 'react-click-out';

class App extends Component {

    state = {

        clickedOut: false

    }

    setClickOutState = () => {

        this.setState({ clickedOut: true });

    }

    render() {

        const {

            state: { clickedOut },

            setClickOutState

        } = this;

        return(

            


                
Hello

                there!

            

        );

    }

}

```


## API Reference

| prop | description | default |

| --------- | ----------- | ----------- |

| onClickOut | click out callback function | - |

| className | className | - |

| container | sets container element tag | div |