
Research
Malicious fezbox npm Package Steals Browser Passwords from Cookies via Innovative QR Code Steganographic Technique
A malicious package uses a QR code as steganography in an innovative technique.
react-boxen
Advanced tools
A layout primitive for React.
React Boxen utilizes Styled Components to provide cross-browser layout.
npm install react-boxen --save
or yarn add react-boxen
This example produces a layout with each child spaced vertically.
import React from "react"
import Box from "react-boxen"
const css = {
parent: `
padding: 1em;
background: lightgray;
`,
child: `
padding: 0.75em;
background: white;
`
}
export default () =>
<Box
css={css.parent}
childSpacing="10px">
<Box css={css.child}>Child 1</Box>
<Box css={css.child}>Child 2</Box>
<Box css={css.child}>Child 3</Box>
</Box>
This example produces a layout with each child spaced horizontally.
import React from "react"
import Box from "react-boxen"
const css = {
parent: `
padding: 1em;
background: lightgray;
`,
child: `
padding: 0.75em;
background: white;
`
}
export default () =>
<Box
css={css.parent}
childDirection="row"
childSpacing="10px">
<Box css={css.child}>Child 1</Box>
<Box css={css.child}>Child 2</Box>
<Box css={css.child}>Child 3</Box>
</Box>
When a child receives grow
as a prop (or data-grow
for native elements) it fills the available space.
import React from "react"
import Box from "react-boxen"
const css = {
parent: `
padding: 1em;
background: lightgray;
`,
child: `
padding: 0.75em;
background: white;
`
}
export default () =>
<Box
css={css.parent}
childDirection="row"
childSpacing="10px">
<Box css={css.child}>Child 1</Box>
<Box grow css={css.child}>Child 2</Box>
<Box css={css.child}>Child 3</Box>
</Box>
Properties placed on the Box component directly.
Property | Type | Value (default * ) | Description |
---|---|---|---|
css | String | Template literal containing valid CSS | See styled-components documentation |
childAlign | String | flex-start * flex-end center stretch baseline | Align children along the cross axis |
childBasis | String | Length | Assigns flex-basis on children |
childDirection | String | column * column-reverse row row-reverse | Vertical or horizontal orientation of children |
childJustify | String | flex-start * flex-end center space-between space-around | Align children along the main axis |
childWrap | String | nowrap * wrap wrap-reverse | Define whether or not children can wrap |
childWrapLastGrow | Bool | True * | Setting to false preserves any orphan element's width when childWrap is wrap . |
childSpacing | String | Length | Spacing between children on any axis (accepts shorthand value 5px 10em ) |
padding | String | Length | Accepts shorthand 5px 10em |
...rest | Any | Any | Rest of props (aside from children ) are spread onto Box itself (e.g. onClick , onPress , etc.) |
Properties added to any direct child. For compound components use values as shown. For native elements (e.g. <div />
) use data-<grow|shrink|...>
(i.e. <div data-grow>Child</div>
).
Property | Type | Value (default * ) | Description |
---|---|---|---|
basis | String | Length | Individual flex-basis. This controls the length (width or height) along the main axis. |
grow | Number | 0 * | Amount Box should grow to fill available space |
scroll | Bool | False * | Sets child wrapper to 100% height and overflow auto |
shrink | Number | 0 * | Amount Box should shrink inside available space |
spacerRef | Func | null * | A function used to access the reference of the child's wrapping Spacer |
Technically, there is nothing preventing usage with React Native. The web is a more immediate proving ground. As the API solidifies, testing and support will be hammered out for RN. PRs are always welcome!
FAQs
A layout primitive for React.
We found that react-boxen 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.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.