Why use it?

a landscape screen of react component.

look like this.

Live Demo

Installation

npm install lesca-react-landscape --save

Usage

As a Node module:

import Landscape from 'lesca-react-landscape';

const LandscapePage = () => {
  return (
      <Landscape style={{ backgroundColor: '#ff6600' }} >
        <myIcon>
      </Landscape>
  );
};

export default LandscapePage;

Development

Props

| props | description | default | | :------- | :-----------: | ------------------------------------: | | style | css-inline-js | default style | | children | reactNode | default children |

Default style

const defaultStyle = {
  position: 'fixed',
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  top: '0',
  left: '0',
};

Default children

<div
  style={{
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 1)',
    backgroundImage: `url(${defaultIcon})`,
    backgroundSize: '10vw',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  }}
/>

Features

• maintain if necessary