![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@bsara/react-layouts
Advanced tools
Readme
A collection of generic, reusable layout components for React.
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"
inline ?Boolean
- Default = false
Determines whether or not the layout should be treated as an inline element or a block element.
domRef ?Function
Function that passes as it's only parameter a reference to the underlying dom element of
the LinearLayout
.
--linear-layout-item-gap Same types as any "margin" CSS property
Sets the gap (I.E. margin) between all direct children of a LinearLayout
.
--sub-linear-layout-item-gap Same types as any "margin" CSS property
Sets the gap (I.E. margin) between all direct children of a LinearLayout
.
NOTE:
--linear-layout-item-gap
takes precedence over this custom property, but it is provided for situations where you may need to nest aLinearLayout
as a direct child of anotherLinearLayout
.
--linear-layout-item-size Same types as "width" or "height" CSS properties
Sets the height (if direction
= "vertical"
) or width (if direction
=
"horizontal"
) of all direct children of a LinearLayout
.
--linear-layout-item-min-size Same types as "min-width" or "min-height" CSS properties
Sets the minimum height (if direction
= "vertical"
) or width (if direction
=
"horizontal"
) of all direct children of a LinearLayout
.
--linear-layout-item-max-size Same types as "max-width" or "max-height" CSS properties
Sets the maximum height (if direction
= "vertical"
) or width (if direction
=
"horizontal"
) of all direct children of a LinearLayout
.
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 arranges children either horizontally in a single column or vertically in a single row and is responsive to size changes.
This component is exactly the same a LinearLayout
except that it has
built in responsive styles when the CSS custom prop --responsive-linear-layout-item-gap
is used. See the docs for LinearLayout
for more information.
Any prop that is acceptable by a
div
component is acceptable by aResponsiveLinearLayout
component.
direction ?String
- Default = "horizontal"
The direction to arrange the component's children.
Possible values:
"horizontal"
"horiz"
"h"
"vertical"
"vert
"v"
inline ?Boolean
- Default = false
Determines whether or not the layout should be treated as an inline element or a block element.
domRef ?Function
Function that passes as it's only parameter a reference to the underlying dom element of
the ResponsiveLinearLayout
.
--responsive-linear-layout-item-gap Same types as any "margin" CSS property
Sets the gap (I.E. margin) between all direct children of a ResponsiveLinearLayout
.
--linear-layout-item-size Same types as "width" or "height" CSS properties
Sets the height (if direction
= "vertical"
) or width (if direction
=
"horizontal"
) of all direct children of a ResponsiveLinearLayout
.
--linear-layout-item-min-size Same types as "min-width" or "min-height" CSS properties
Sets the minimum height (if direction
= "vertical"
) or width (if direction
=
"horizontal"
) of all direct children of a ResponsiveLinearLayout
.
--linear-layout-item-max-size Same types as "max-width" or "max-height" CSS properties
Sets the maximum height (if direction
= "vertical"
) or width (if direction
=
"horizontal"
) of all direct children of a ResponsiveLinearLayout
.
MyResponsiveLinearLayoutComponent.jsx
import React from 'react';
import LinearLayout from '@bsara/react-layouts/LinearLayout';
import ResponsiveLinearLayout from '@bsara/react-layouts/ResponsiveLinearLayout';
import './MyResponsiveLinearLayoutComponent.css';
export default function MyResponsiveLinearLayoutComponent(props) {
return (
<ResponsiveLinearLayout {...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>
</ResponsiveLinearLayout>
);
}
MyResponsiveLinearLayoutComponent.css
.layout {
--responsive-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 (but will also
be responsive to sizing changes):
|----------|----------|----------|----------------|
| 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.
inline ?Boolean
- Default = false
Determines whether or not the layout should be treated as an inline element or a block element.
domRef ?Function
Function that passes as it's only parameter a reference to the underlying dom element of
the GridLayout
.
--grid-row-count ?Number
When used, automatically styles a GridLayout
with the number of rows specified.
--grid-column-count ?Number
When used, automatically styles a GridLayout
with the number of columns specified.
--grid-row-span ?Number
Sets the number of rows a direct child of GridLayout
should span.
--grid-column-span ?Number
Sets the number of columns a direct child of GridLayout
should span.
--grid-item-size Same types as "width" or "height" CSS properties
Sets the height and width of all direct children of a GridLayout
.
--grid-item-min-size Same types as "min-width" or "min-height" CSS properties
Sets the minimum height and width of all direct children of a GridLayout
.
--grid-item-max-size Same types as "max-width" or "max-height" CSS properties
Sets the maximum height and width of all direct children of a GridLayout
.
--grid-item-width Same types as "width" CSS property
Sets the width of all direct children of a GridLayout
.
--grid-item-min-width Same types as "min-width" CSS property
Sets the minimum width of all direct children of a GridLayout
.
--grid-item-max-width Same types as "max-width" CSS property
Sets the maximum width of all direct children of a GridLayout
.
--grid-item-height Same types as "height" CSS property
Sets the height of all direct children of a GridLayout
.
--grid-item-min-height Same types as "min-height" CSS property
Sets the minimum height of all direct children of a GridLayout
.
--grid-item-max-height Same types as "max-height" CSS property
Sets the maximum height of all direct children of a GridLayout
.
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
The npm package @bsara/react-layouts receives a total of 0 weekly downloads. As such, @bsara/react-layouts popularity was classified as not popular.
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.