@jswork/react-static-container

Static container for react.

Usage no npm install needed!

<script type="module">
  import jsworkReactStaticContainer from 'https://cdn.skypack.dev/@jswork/react-static-container';
</script>

README

react-static-container

Static container for react.

version license size download

installation

npm install -S @jswork/react-static-container

properties

Name Type Required Default Description
as any false React.Fragment The static node name.
deps array false [] The deps of the component.
dynamic bool false false The default should update.

usage

  1. import css
@import "~@jswork/boilerplate-react-component/dist/style.css";

// or use sass
@import "~@jswork/boilerplate-react-component/dist/style.scss";

// customize your styles:
$boilerplate-react-component-options: ()
  1. import js
import React, { useState } from 'react';
import ReactStaticContainer from '../@jswork/boilerplate-react-component';
import styled from 'styled-components';

const Container = styled.div`
  width: 80%;
  margin: 30px auto 0;
`;

export default (props: any) => {
  const [count, setCount] = useState(10);
  const [id, setId] = useState(0);
  return (
    <Container>
      <button onClick={(e) => setCount(count + 1)}>Change Counter</button>
      <button onClick={(e) => setId(Date.now())}>Change Id</button>
      <p>
        I can not change.(except the first time.)
        <ReactStaticContainer>{count}</ReactStaticContainer>
      </p>
      <p>
        I can change.(Because i have deps changed.)
        <ReactStaticContainer deps={[id]}>{count}</ReactStaticContainer>
      </p>
      <p>
        <strong>I can change {count}</strong>
      </p>
    </Container>
  );
};

license

Code released under the MIT license.