reactlite

Install

npm install --save reactlite

Usage

DEMO

https://codesandbox.io/s/7yqyq2q8x

Box

<Box color="red" fontSize="24px">
  24px Red Div
</Box>

Container

<Container
  smBackgroundColor="red"
  mdBackgroundColor="green"
  lgBackgroundColor="blue"
>
  media query auto change backgroundColor: Red/Green/Blue
</Container>

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