└── Readme.md


/Readme.md:
--------------------------------------------------------------------------------
  1 | # Bootstrap Helpers
  2 | 
  3 | These are my own versions of components that I use for my React Applications, where these snippets might help me by reducing the repetitive stuff that I need to do. All these components are based out of **Bootstrap 4 version** and they might need an upgrade.
  4 | 
  5 | ## Card Element
  6 | 
  7 | This creates a card element.
  8 | 
  9 | ```react
 10 | import React from "react";
 11 | 
 12 | const Card = ({
 13 |   Image,
 14 |   ImgAlign,
 15 |   Header,
 16 |   TextHeader,
 17 |   Title,
 18 |   Text,
 19 |   children,
 20 |   Footer,
 21 |   className
 22 | }) => {
 23 |   return (
 24 |     <div className={"card" + (className ? " " + className : "")}>
 25 |       {Image && (
 26 |         <img
 27 |           className={"card-img-" + ImgAlign}
 28 |           src={Image}
 29 |           alt={Header && Title}
 30 |         />
 31 |       )}
 32 |       {Header &&
 33 |         (TextHeader ? (
 34 |           <div className="card-header">{Header}</div>
 35 |         ) : (
 36 |           <h5 className="card-header">{Header}</h5>
 37 |         ))}
 38 |       {(Title || Text || children) && (
 39 |         <div className="card-body">
 40 |           {Title && <h5 className="card-title">{Title}</h5>}
 41 |           {Text && <p className="card-text">{Text}</p>}
 42 |           {children}
 43 |         </div>
 44 |       )}
 45 |       {Footer && <div className="card-footer text-muted">{Footer}</div>}
 46 |     </div>
 47 |   );
 48 | };
 49 | 
 50 | export default Card;
 51 | ```
 52 | 
 53 | ## Containers
 54 | 
 55 | ### Container with a Single Row
 56 | 
 57 | This creates a container with a row.
 58 | 
 59 | ```react
 60 | import React from "react";
 61 | 
 62 | const ContainerRow = ({ fluid, className, children }) => {
 63 |   return (
 64 |     <div
 65 |       className={
 66 |         "container" +
 67 |         (fluid ? "-fluid" : "") +
 68 |         (className && className.length > 0 ? " " + className : "")
 69 |       }
 70 |     >
 71 |       <div className="row">{children}</div>
 72 |     </div>
 73 |   );
 74 | };
 75 | 
 76 | export default ContainerRow;
 77 | ```
 78 | 
 79 | ### Container Element
 80 | 
 81 | This creates a generic container element.
 82 | 
 83 | ```react
 84 | import React from "react";
 85 | 
 86 | const Container = ({ fluid, className, children }) => {
 87 |   return (
 88 |     <div
 89 |       className={
 90 |         "container" +
 91 |         (fluid ? "-fluid" : "") +
 92 |         (className && className.length > 0 ? " " + className : "")
 93 |       }
 94 |     >
 95 |       {children}
 96 |     </div>
 97 |   );
 98 | };
 99 | 
100 | export default Container;
101 | ```
102 | 
103 | ## Headers
104 | 
105 | ```react
106 | import React from "react";
107 | 
108 | const Header = ({ dark, children, className, to, Link }) => {
109 |   dark = !!dark ? "dark" : "light";
110 |   return (
111 |     <nav
112 |       className={
113 |         `navbar navbar-${dark} bg-${dark}` + (className ? " " + className : "")
114 |       }
115 |     >
116 |       {to ? (
117 |         <Link to={to} className="navbar-brand">
118 |           {children}
119 |         </Link>
120 |       ) : (
121 |         <span className="navbar-brand">{children}</span>
122 |       )}
123 |     </nav>
124 |   );
125 | };
126 | 
127 | export default Header;
128 | ```
129 | 
130 | ### Headers with Links
131 | 
132 | ```react
133 | import React from "react";
134 | 
135 | const Header = ({ dark, children, className, pages, to, Link }) => {
136 |   dark = !!dark ? "dark" : "light";
137 |   return (
138 |     <nav
139 |       className={
140 |         `Header navbar navbar-${dark} bg-${dark}` +
141 |         (className ? " " + className : "") +
142 |         (pages && pages.length ? " navbar-expand-lg" : "")
143 |       }
144 |     >
145 |       {to ? (
146 |         <Link to={to} className="navbar-brand">
147 |           {children}
148 |         </Link>
149 |       ) : (
150 |         <span className="navbar-brand">{children}</span>
151 |       )}
152 |       {pages && pages.length > 0 && (
153 |         <div className="collapse navbar-collapse">
154 |           <ul className="navbar-nav mr-auto">
155 |             {pages
156 |               .filter(a => !a.DontShow)
157 |               .map((item, key) => (
158 |                 <li className="nav-item" key={key}>
159 |                   <Link to={item.Path} className="nav-link">
160 |                     {item.Name}
161 |                   </Link>
162 |                 </li>
163 |               ))}
164 |           </ul>
165 |         </div>
166 |       )}
167 |     </nav>
168 |   );
169 | };
170 | 
171 | export default Header;
172 | ```
173 | 
174 | ### Headers with Items
175 | 
176 | Possibly send a button with an `onClick` handler.
177 | 
178 | ```react
179 | import React from "react";
180 | 
181 | const Header = ({ dark, children, className, items, to, Link }) => {
182 |   dark = !!dark ? "dark" : "light";
183 |   return (
184 |     <nav
185 |       className={
186 |         `Header navbar navbar-${dark} bg-${dark}` +
187 |         (className ? " " + className : "") +
188 |         (items && items.length ? " navbar-expand-lg" : "")
189 |       }
190 |     >
191 |       {to ? (
192 |         <Link to={to} className="navbar-brand">
193 |           {children}
194 |         </Link>
195 |       ) : (
196 |         <span className="navbar-brand">{children}</span>
197 |       )}
198 |       {items && items.length > 0 && (
199 |         <div className="collapse navbar-collapse">
200 |           <ul className="navbar-nav mr-auto">
201 |             {items.map((item, key) => (
202 |               <li className="nav-item" key={key}>
203 |                 {item}
204 |               </li>
205 |             ))}
206 |           </ul>
207 |         </div>
208 |       )}
209 |     </nav>
210 |   );
211 | };
212 | 
213 | export default Header;
214 | ```
215 | 
216 | For a right aligned buttons, use this...
217 | 
218 | ```react
219 | import React from "react";
220 | 
221 | const Header = ({ dark, children, className, items, to, Link }) => {
222 |   dark = !!dark ? "dark" : "light";
223 |   return (
224 |     <nav
225 |       className={
226 |         `Header navbar navbar-${dark} bg-${dark}` +
227 |         (className ? " " + className : "") +
228 |         (items && items.length ? " navbar-expand-lg" : "")
229 |       }
230 |     >
231 |       {to ? (
232 |         <Link to={to} className="navbar-brand">
233 |           {children}
234 |         </Link>
235 |       ) : (
236 |         <span className="navbar-brand">{children}</span>
237 |       )}
238 |       {items && items.length > 0 && (
239 |         <div className="collapse navbar-collapse">
240 |           <ul className="navbar-nav ml-auto">
241 |             {items.map((item, key) => (
242 |               <li className="nav-item" key={key}>
243 |                 {item}
244 |               </li>
245 |             ))}
246 |           </ul>
247 |         </div>
248 |       )}
249 |     </nav>
250 |   );
251 | };
252 | 
253 | export default Header;
254 | ```
255 | 
256 | ## Forms
257 | 
258 | ### Form Group
259 | 
260 | For all the `<input />` based elements, we have a `FormGroup` component here.
261 | 
262 | ```react
263 | import React from "react";
264 | 
265 | const FormGroup = ({
266 |   Id,
267 |   Label,
268 |   Type,
269 |   onChange,
270 |   Value,
271 |   defaultValue,
272 |   Checked,
273 |   defaultChecked,
274 |   Placeholder,
275 |   Desc
276 | }) => {
277 |   return (
278 |     <div className="form-group">
279 |       <label htmlFor={Id}>{Label}</label>
280 |       <input
281 |         type={Type}
282 |         className="form-control"
283 |         id={Id}
284 |         name={Id}
285 |         onChange={onChange}
286 |         value={Value}
287 |         placeholder={Placeholder}
288 |         defaultValue={defaultValue}
289 |         checked={Checked}
290 |         defaultChecked={defaultChecked}
291 |         aria-describedby={Id + "Help"}
292 |       />
293 |       {Desc && (
294 |         <small id={Id + "Help"} className="form-text text-muted">
295 |           {Desc}
296 |         </small>
297 |       )}
298 |     </div>
299 |   );
300 | };
301 | 
302 | export default FormGroup;
303 | ```
304 | 
305 | ## Modal Window & Utilities
306 | 
307 | ### Cancelling Propagation
308 | 
309 | It’s noted that Modal Windows have multiple layers and some of the events need to be cancelled. I created a generic `CancelPropagation` to combat this problem. This can be currently stored inside the `utils` directory as `GenUtils.js` and it has been exposed and exported.
310 | 
311 | ```javascript
312 | export const CancelPropagation = (e, next) => {
313 |   e.stopPropagation();
314 |   if (next && typeof next === "function") next();
315 | };
316 | ```
317 | 
318 | ### Modal
319 | 
320 | ```react
321 | import { CancelPropagation } from "../../utils/GenUtils";
322 | 
323 | const Modal = ({
324 |   children,
325 |   Confirm,
326 |   Cancel,
327 |   Title,
328 |   CancelButton,
329 |   ConfirmButton
330 | }) => {
331 |   return (
332 |     <>
333 |       <div className="Modal modal d-block" role="dialog" onClick={Cancel}>
334 |         <div
335 |           className="modal-dialog"
336 |           role="document"
337 |           onClick={CancelPropagation}
338 |         >
339 |           <div className="modal-content">
340 |             <div className="modal-header">
341 |               <h5 className="modal-title">{Title}</h5>
342 |               <button
343 |                 type="button"
344 |                 className="close"
345 |                 aria-label="Close"
346 |                 onClick={Cancel}
347 |               >
348 |                 <span aria-hidden="true">&times;</span>
349 |               </button>
350 |             </div>
351 |             <div className="modal-body">{children}</div>
352 |             <div className="modal-footer">
353 |               <button
354 |                 type="button"
355 |                 className="btn btn-secondary"
356 |                 onClick={Cancel}
357 |               >
358 |                 {CancelButton}
359 |               </button>
360 |               <button
361 |                 type="button"
362 |                 className="btn btn-primary"
363 |                 onClick={Confirm}
364 |               >
365 |                 {ConfirmButton}
366 |               </button>
367 |             </div>
368 |           </div>
369 |         </div>
370 |       </div>
371 |       <div className="modal-backdrop fade show"></div>
372 |     </>
373 |   );
374 | };
375 | 
376 | export default Modal;
377 | ```
378 | 


--------------------------------------------------------------------------------