Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gamtiq/tempshow
React component to temporary show some components/elements
https://github.com/gamtiq/tempshow
change component content element elements hidden hide react show temporary visibility visible
Last synced: about 8 hours ago
JSON representation
React component to temporary show some components/elements
- Host: GitHub
- URL: https://github.com/gamtiq/tempshow
- Owner: gamtiq
- Created: 2019-09-08T18:32:40.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-25T15:11:54.000Z (over 3 years ago)
- Last Synced: 2024-10-06T19:05:56.550Z (about 1 month ago)
- Topics: change, component, content, element, elements, hidden, hide, react, show, temporary, visibility, visible
- Language: JavaScript
- Homepage:
- Size: 400 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
React component to temporary show some components/elements.
[](http://badge.fury.io/js/tempshow)
### Features
* Control which events should trigger showing or hiding.
* Set timeout for automatic hiding (`autoHide` property).
* Specify a function to be called when component is shown (`onShow` property) or hidden (`onHide` property).
* Control component's visibility by `visible` property.
* Use different CSS classes and styles when component is visible and hidden.
## Table of contents
* [Installation](#install)
* [Usage](#usage)
* [API](#api)
* [Contributing](#contributing)
* [License](#license)
npm install tempshow --save
```js
import TempShow from 'tempshow';
// ...
export class Foo extends React.Component {
constructor(props) {
super(props);
this.handleVisibleChange = this.handleVisibleChange.bind(this);
}
// ...
/**
* Handle component's visibility change.
*
* @param {boolean} visible
* `true`, when component became visible, `false`, when component became invisible.
*/
handleVisibleChange(visible) {
// ...
}
render() {
// ...
return (
Some content here.
);
}
}
```
### Props
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `autoHide` | number | `5` | Number of seconds after which component should be hidden automatically. When zero or negative value is specified auto hiding is not applied. |
| `children` | React node | | Component's children. |
| `className` | string | | A CSS class that should be set for component's root element. |
| `component` | React elementType | `div` | Component's root element type. |
| `componentProps` | object | | Any properties (except for `className` and `style`) that should be passed to component. |
| `componentRef` | function, object | | An optional ref callback to get reference to the root (top-most) element of the rendered component. Just like other refs, this will provide `null` when it unmounts. |
| `hideClassName` | string | | An additional CSS class that should be set for component's root element when component is hidden. |
| `hideForClick` | function | [hideForClick](#hideForClick) | Function that will be used to determine whether component should be hidden on a mouse click when value of `hideOnAnyClick` prop is `false`. The following arguments will be passed into function: event data (`SyntheticEvent`) and component's object. If function returns a true value, component will be hidden. |
| `hideOnAnyClick` | boolean | `false` | Whether component should be hidden on any mouse click. |
| `hideOnBlur` | boolean or function | `false` | Whether component should be hidden on `blur` event. A function can be specified to determine whether component should be hidden. The following arguments will be passed into function: event data (`SyntheticEvent`) and component's object. If the function returns a true value, component will be hidden. |
| `hideOnMouseLeave` | boolean | `false` | Whether component should be hidden when mouse leaves area of component's root DOM element. |
| `hideStyle` | object | | Styles that should be assigned for hidden component. |
| `postponeAutoHide` | boolean | `true` | Whether component's autohiding should be postponed when component props are changed. |
| `showClassName` | string | | An additional CSS class that should be set for component's root element when component is visible. |
| `showOnFocus` | boolean or function | `true` | Whether component should be shown on `focus` event. A function can be specified to determine whether component should be shown. The following arguments will be passed into function: event data (`SyntheticEvent`) and component's object. If the function returns a true value, component will be shown. |
| `showOnMouseOver` | boolean | `true` | Should component be shown on mouse over? |
| `showStyle` | object | | Styles that should be assigned for visible component. |
| `toggleVisibleOnClick` | boolean | `true` | Whether component visibility should be toggled on a mouse click. |
| `visible` | boolean | `false` | Should component be visible? Can be used to explicitly control component's visibility. |
| `onHide` | function | | Function that should be called on component hidding. |
| `onShow` | function | | Function that should be called on component show. |
### Methods
#### TempShow.hideForClick(eventData: SyntheticEvent): boolean
Default function that is used to determine whether component should be hidden on a mouse click.
Return `true` when component's root DOM element is clicked.
## Contributing [↑](#start)
In lieu of a formal styleguide, take care to maintain the existing coding style.
Add tests for any new functionality.
## License [↑](#start)
Copyright (c) 2019-2020 Denis Sikuler
Licensed under the MIT license.