Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@bsara/react-layouts
Advanced tools
Project Install
$ npm install --save @bsara/react-layouts
A layout that arranges children either horizontally in a single column or vertically in a single row.
At it's core, this component is basically a CSS flexbox.
As such, all CSS flexbox properties are valid when styling a LinearLayout
. This also
means that this component is NOT supported in browsers that do not support CSS flexbox
without appropriate polyfills.
Some sensible CSS defaults have been set and some CSS custom properties have been provided as a convenience (see the documented CSS custom properties below for more details).
Any prop that is acceptable by a
div
component is acceptable by aLinearLayout
component.
direction ?String
- Default = "horizontal"
The direction to arrange the component's children.
Possible values:
"horizontal"
"horiz"
"h"
"vertical"
"vert
"v"
domRef ?Function
TODO: Description
--linear-layout-item-gap Same types as any "margin" CSS property
TODO: Description
--linear-layout-item-size Same types as "width" or "height" CSS properties
TODO: Description
--linear-layout-item-min-size Same types as "min-width" or "min-height" CSS properties
TODO: Description
--linear-layout-item-max-size Same types as "max-width" or "max-height" CSS properties
TODO: Description
MyLinearLayoutComponent.jsx
import React from 'react';
import LinearLayout from '@bsara/react-layouts/LinearLayout';
import './MyLinearLayoutComponent.css';
export default function MyLinearLayoutComponent(props) {
return (
<LinearLayout {...props} className="layout" direction="horizontal">
<a>Anchor 0</a>
<a>Anchor 1</a>
<a>Anchor 2</a>
<LinearLayout className="sub-layout" direction="vertical">
<a>Sub Anchor 0</a>
<a>Sub Anchor 1</a>
<a>Sub Anchor 2</a>
</LinearLayout>
</LinearLayout>
);
}
MyLinearLayoutComponent.css
.layout {
--linear-layout-item-gap: 5px;
}
.sub-layout > * {
--linear-layout-item-gap: 10px;
}
Output (Text Representation)
The component above will lay out it's children similar to the following:
|----------|----------|----------|----------------|
| Anchor 0 | Anchor 1 | Anchor 2 ||--------------||
| | | || Sub Anchor 0 ||
| | | ||--------------||
| | | || Sub Anchor 1 ||
| | | ||--------------||
| | | || Sub Anchor 2 ||
| | | ||--------------||
|----------|----------|----------|----------------|
A layout that places its children in a rectangular grid.
This layout is basically a CSS grid.
As such, all CSS grid properties are valid when styling a GridLayout
. This also means
that this component is NOT supported in browsers that do not support CSS grid without
appropriate polyfills.
Some sensible CSS defaults have been set and some CSS custom properties have been provided as a convenience (see the documented CSS custom properties below for more details).
Any prop that is acceptable by a
div
component is acceptable by aGridLayout
component.
domRef ?Function
TODO: Description
--grid-row-count ?Number
TODO: Description
--grid-column-count ?Number
TODO: Description
--grid-row-span ?Number
TODO: Description
--grid-column-span ?Number
TODO: Description
--grid-item-size Same types as "width" or "height" CSS properties
TODO: Description
--grid-item-min-size Same types as "min-width" or "min-height" CSS properties
TODO: Description
--grid-item-max-size Same types as "max-width" or "max-height" CSS properties
TODO: Description
--grid-item-width Same types as "width" CSS property
TODO: Description
--grid-item-min-width Same types as "min-width" CSS property
TODO: Description
--grid-item-max-width Same types as "max-width" CSS property
TODO: Description
--grid-item-height Same types as "height" CSS property
TODO: Description
--grid-item-min-height Same types as "min-height" CSS property
TODO: Description
--grid-item-max-height Same types as "max-height" CSS property
TODO: Description
MyGridLayoutComponent.jsx
import React from 'react';
import GridLayout from '@bsara/react-layouts/GridLayout';
import './MyGridLayoutComponent.css';
export default function MyGridLayoutComponent(props) {
return (
<GridLayout {...props} className="layout">
<span className="cell0-0">Item 0.0</span>
<span className="cell0-1">Item 0.1</span>
<span>Item 1.1</span>
<span>Item 1.2</span>
</GridLayout>
);
}
MyGridLayoutComponent.css
.layout {
--grid-column-count: 3;
}
.cell0-0 {
--grid-row-span: 2;
}
.cell0-1 {
--grid-column-span: 2;
}
Output (Text Representation)
The component above will lay out it's children similar to the following:
|----------|---------------------|
| Item 0.0 | Item 0.1 |
| |----------|----------|
| | Item 1.1 | Item 1.2 |
|----------|----------|----------|
ISC License (ISC)
Copyright (c) 2018, Brandon D. Sara (http://bsara.pro/)
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
FAQs
A collection of generic, reusable layout components for React
We found that @bsara/react-layouts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.