/Javascript/React/How to use adminlte in reacts

How to use adminlte in reacts

import React, { Component } from 'react';
import AdminLTE, { Sidebar, Content, Row, Col, Box, Button } from 'adminlte-2-react';

const { Item } = Sidebar;

class HelloWorld extends Component {
  state = {}

  render() {
    return (<Content title="Hello World" subTitle="Getting started with adminlte-2-react" browserTitle="Hello World">
      <Row>
        <Col xs={6}>
          <Box title="My first box" type="primary" closable collapsable footer={<Button type="danger" text="Danger Button" />}>
            Hello World
          </Box>
        </Col>
        <Col xs={6}>
          <Box title="Another box">
            Content goes here
          </Box>
        </Col>
      </Row>
    </Content>);
  }
}

class App extends Component {

  sidebar = [
    <Item key="hello" text="Hello" to="/hello-world" />
  ]

  render() {
    return (
      <AdminLTE title={["Hello", "World"]} titleShort={["He", "we"]} theme="blue" sidebar={this.sidebar}>
        <HelloWorld path="/hello-world" />
      </AdminLTE>
    );
  }
}

export default App;

Source: npmjs.com

Similar codes

0 vote355 views1 answer
React ES6 Arrow Functions
Javascript React
0 vote350 views1 answer
React get dynamic window sizes
Javascript React
0 vote362 views1 answer
Remove react native cli mac
Javascript React
21 votes350 views6 answers
Shadow in react native
Javascript React
47 votes398 views3 answers
How to comment in the react javascript
Javascript React
25 votes254 views4 answers
React context
Javascript React
0 vote358 views1 answer
Bot react message with custom emoji
Javascript React
6 votes367 views2 answers
React native disable the text input
Javascript React
0 vote334 views1 answer
Detect finishing write react input
Javascript React
28 votes357 views1 answer
Semantic ui dropdown value react
Javascript React