1.0.15 • Published 4 years ago
@feizheng/react-visible v1.0.15
react-visible
React component for visible element.
installation
npm install -S @feizheng/react-visible
update
npm update @feizheng/react-visible
properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
value | bool | false | - | Abstract visible value. |
destroyable | bool | false | false | If element destroyed when visible to false. |
rootable | bool | false | false | If attach the visible element to document root or a container. |
onChange | func | false | noop | The handler when visible changed, default is noop function, present or dismiss action will trigger. |
onPresent | func | false | noop | The handler when present. |
onDismiss | func | false | noop | The handler when dismiss. |
usage
import css
@import "~@feizheng/react-visible/dist/style.scss"; // customize your styles: $react-visible-options: ()
import js
import ReactVisible, { Controller } from '@feizheng/react-visible'; import ReactDOM from 'react-dom'; import React from 'react'; import './assets/style.scss'; class Backdrop extends ReactVisible { get visibleElementView() { const { className, destroyable, rootable, value, onPresent, onDismiss, ...props } = this.props; const { hidden } = this.state; return ( <div data-position="absolute" data-component={'backdrop'} hidden={hidden} data-visible={this.state.value} hidden={hidden} className={`webkit-sassui-backdrop ${className}`} onAnimationEnd={this.handleAnimationEnd} {...props} /> ); } } class App extends React.Component { state = { value: false }; componentDidMount() { console.log(Controller.createInstance); Controller.createInstance(Backdrop, { destroyable: true }, true); } render() { return ( <div className="app-container"> <button className="button" onClick={(e) => { this.el.present(); }}> Button Open </button> <button className="button" onClick={(e) => { this.el.dismiss(); }}> Button Close </button> <Backdrop ref={(el) => (this.el = el)} /> <Backdrop value={this.state.value} destroyable onChange={(e) => { console.log('e.target.value:', e.target.value); this.setState({ value: e.target.value }); }} /> <button className="button" onClick={(e) => { this.setState({ value: !this.state.value }); }}> Toggle </button> <button className="button" onClick={(e) => { Backdrop.toggle((e) => { console.log('after present/dismiss!', e); }); }}> Singleton backdrop Toggle </button> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));
documentation
license
Code released under the MIT license.