[React Style] LazyInject

Table of Contents

• Syntax
• Sample
  • Function sample
  • Class sample

Syntax

• Before

  import {reactStyle} from 'react-atomic-molecule';
  
  reactStyle({...css}, css-selector[option], css-id[option]);

• After

  import {lazyInject} from 'react-atomic-molecule';
  
  let injects;
  const InjectStyles = {
     yourKey: [
        {...css},
        css-selector, // [option]
        css-id, // [option]
     ],
     anotherKey: [
        {...css},
        css-selector, // [option]
        css-id, // [option]
     ],
  };

• Call with other lazy function

  injects = lazyInject( InjectStyles, injects )

⚠️	After version 3.x lazyInject parameters order were changed. FROM lazyInject( injects, InjectStyles ) TO lazyInject( InjectStyles, injects )

Sample

Function sample

import React from 'rect'
import { useLazyInject } from 'react-atomic-molecule'

const SampleFunctionComponent = props => {
    injects = useLazyInject( InjectStyles, injects );

    return (
      <SemanticUI
        styles={injects.line}
     />
    );
};

let injects;
const InjectStyles = {
    line: [{
        position:'absolute',
        left:'50%',
        top:'50%',
        transform: ['translate(-50%,-50%) rotate(45deg)']
    }],
    line2: [{
        transform:['rotate(90deg)']
    }]
};

Class sample

import React, {PureComponent} from 'react'
import { lazyInject } from 'react-atomic-molecule'

class SampleClassComponent extends PureComponent
{
   constructor(props) 
   {
      super(props)
      injects = lazyInject( InjectStyles, injects )
   }
   
   render()
   {
      return(
        <SemanticUI
           styles={injects.line}
        />
      )
   }
}
let injects;
const InjectStyles = {
    line: [{
        position:'absolute',
        left:'50%',
        top:'50%',
        transform: ['translate(-50%,-50%) rotate(45deg)']
    }],

};