reactlite v3.2.13

reactlite

Install

npm install --save reactlite

Usage

Layer

import React, { Component } from 'react';

import { Layer, Text } from 'reactlite';

class Example extends Component {
  render() {
    let { showLayer } = this.props;
    return (
      showLayer && (
        <Layer>
          <Text>Layer Content</Text>
        </Layer>
      )
    );
  }
}

全局 Layer

import React, { Component } from 'react';

import { Box, Button, Text, Layer } from 'reactlite';

class App extends Component {
  render() {
    return <Layer.Placeholder />;
  }
}
class Example extends Component {
  add = () => {
    this.element = <Text>Layer Content</Text>;
    Layer.mount(this.element);
  };
  remove = () => {
    Layer.unmount(this.element);
  };
  render() {
    return (
      <Box>
        <Button onClick={this.add}>add</Button>
        <Button onClick={this.remove}>remove</Button>
      </Box>
    );
  }
}

unmount self

import React, { Component } from 'react';

import { Layer } from 'reactlite';

class App extends Component {
  render() {
    return <Layer.Placeholder />;
  }
}
class Modal extends Component {
  unmount = () => {
    this.props.unmount();
  };
  render() {
    return (
      <div>
        <button onClick={this.unmount}>unmount self</button>
      </div>
    );
  }
}
class Example extends Component {
  add = () => {
    this.element = <Modal />;
    Layer.mount(this.element);
  };

  render() {
    return <button onClick={this.add}>add</button>;
  }
}

License

MIT © lomocc