[ TIL 221203 ] React Semantic UI

React Semantic UI 홈페이지

semantic ?

의미론적 웹 => 기계가 이해할 수 있는 웹페이지

Install

$  yarn add semantic-ui-react semantic-ui-css
## Or NPM
$  npm install semantic-ui-react semantic-ui-css

css

import 'semantic-ui-css/semantic.min.css'

사용해보기

Visibility Progress

컨텐츠 진행 상황에 따라 값이 변하는 progress bar

import _ from "lodash";
import React, { Component, createRef } from "react";
import {
  Divider,
  Grid,
  Image,
  Segment,
  Sticky,
  Ref,
  Visibility,
  Progress
} from "semantic-ui-react";

export default class VisibilityExampleVisibility extends Component {
  state = {
    calculations: {
      direction: "none",
      height: 0,
      width: 0,
      topPassed: false,
      bottomPassed: false,
      pixelsPassed: 0,
      percentagePassed: 0,
      topVisible: false,
      bottomVisible: false,
      fits: false,
      passing: false,
      onScreen: false,
      offScreen: false
    }
  };
  contextRef = createRef();

  handleUpdate = (e, { calculations }) => this.setState({ calculations });

  render() {
    const { calculations } = this.state;

    return (
      <>
        <Sticky context={this.contextRef}>
          <Progress
            style={{ zIndex: 999 }}
            percent={(
              (calculations.pixelsPassed /
                (calculations.height - window.innerHeight)) *
              100
            ).toFixed()}
            progress
          />
        </Sticky>
        <Ref innerRef={this.contextRef}>
          <Grid columns={2}>
            <Grid.Column>
              <Visibility onUpdate={this.handleUpdate}>
                <Segment>
                  {_.map(
                    [
                      "https://react.semantic-ui.com/images/wireframe/centered-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/short-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/media-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/centered-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/short-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/media-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/centered-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/short-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/media-paragraph.png",
                      "https://react.semantic-ui.com/images/wireframe/paragraph.png"
                    ],
                    (src, index, images) => (
                      <React.Fragment key={index}>
                        <Image src={src} />
                        {index !== images.length - 1 && <Divider />}
                      </React.Fragment>
                    )
                  )}
                </Segment>
              </Visibility>
            </Grid.Column>
          </Grid>
        </Ref>
        <div style={{ height: 1000, width: "100%" }}></div>
      </>
    );
  }
}

다른 components 들도 많으니 활용해보자~!!