1.1.2 • Published 5 years ago

bs4-flex-helper v1.1.2

Weekly downloads
7
License
ISC
Repository
github
Last release
5 years ago

bs4-flex-helper

bs4-flex-helper is a helper function the generate corresponding BS4 flex classes, based on single value or array of values for responsive breakpoints.

Install

npm i bs4-flex-helper

or

yarn add bs4-flex-helper

Usage

  import bs4FlexHelper from 'bs4-flex-helper';

  const divClasses = bs4FlexHelper({ dir: 'row' });

  console.log(divClasses); // d-flex flex-row

Main function accept 2 arguments:

  • object contains properties to set
  • boolean to insert base flex class before (d-flex)
propertytypevaluesdefaultdescription
dirstring or array'sm' or 'xs', 'sm', ...flex-direction property
jcstring or array'sm' or 'xs', 'sm', ...justify-content property
aistring or array'sm' or 'xs', 'sm', ...align-items property
acstring or array'sm' or 'xs', 'sm', ...align-content property
wrapstring or array'sm' or 'xs', 'sm', ...wrap property
inlinebooleantrue or falsefalseuse inline-flex or flex

Example with React

import React from 'react';
import bs4FlexHelper from 'bs4-flex-helper';

const bs4Class = bs4FlexHelper({ dir: 'row' });

export default function Panel() {
  return <div className={bs4Class}>bs4-flex-helper</div>;
}

->

<div class="d-flex flex-row">bs4-flex-helper</div>
1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago