React components for FigStrap.
Using yarn?
yarn add @bitesite/react-figstrap
Or NPM?
npm install @bitesite/react-figstrap
You'll also have to make sure you're using react
, and styled-components
:
yarn add react styled-components
The main component of Figstrap is an Auto-layout Frame. When a designer uses a Frame in Figma and sets it to Auto-layout, you can use the Frame component in your React code to achieve the same effect.
e.g.
import { Frame } from '@bitesite/react-figstrap';
const MyComponent = () => {
return (
<Frame vertical gap={20} padding={10} alignItems="center" justifyContent="flex-end">
...
</Frame>
);
};
prop | Description |
---|---|
vertical |
Optional - When set to true , children are laid out vertically. If this is not specified, the default Frame will lay out children horizontally |
padding |
Optional - The amount of padding in pixels as an number. Unlike the plain old CSS version of FigStrap, the React version is not limited to certain padding sizes. So you can put whatever number you want here. |
gap |
Optional - The size of the gap between children in pixels as an number. Unlike the plain old CSS version of FigStrap, the React version is not limited to certain gap sizes. So you can put whatever number you want here. |
alignItems |
Optional - This directly translates to Flexbox align-items . Use any flexbox valid value like center or flex-start . The default value for this is stretch . |
justifyContent |
Optional - This directly translates to Flexbox justify-content . Use any flexbox valid value like center or flex-start . The default value for this is flex-start . |
The Frame
component is implemented using a div
and styled components. As such, you can pass any valid HTML attribute to the Frame
and it will just apply it to the div
.
The Frame
component is implemented using a div
and styled components so you're always going to get a div
if you use the Frame
. However, because it's built using styled components, you can decide to render other HTML elements instead using the as
functionality of styled components.
e.g.
return (
<Frame vertical padding={20} as='form'>
...
</Frame>
);
The above will render a form
rather than a div
.
The Frame
component is implemented using styled components, so if you need to apply additional CSS or what to create another component based on a Frame, you can.
e.g.
return (
<Frame vertical padding={20} style={{background: 'black'}}>
...
</Frame>
);
e.g.
return (
<Frame className='product-list' vertical padding={20}>
...
</Frame>
);
e.g.
import styled from 'styled-components';
import { Frame } from '@bitesite/react-figstrap';
const MyFancyFrame = styled(Frame)`
border-radius: 3px;
border: 2px solid #000000;
background: #efefef;
`;
export default MyFancyFrame;
If you're a developer on this project and you want to create a new build and publish it:
- Update the version number in
package.json
. - Build the output by running
npx webpack
- Package the output by running
npm pack
- Publish the package by running
npm publish --access public