@fecapark-stack/react

Github

React utilities for fast coding.

Install & Import

npm install @fecapark-stack/react

yarn add @fecapark-stack/react

then,

import { ... } from "@fecapark-stack/react";

IconWrapper

component

Use for centerize icon.
Recommend react-icons for here.

Usage

import { IconWrapper } from "@fecapark-stack/react";

<IconWrapper>
  <svg>...</svg>
</IconWrapper>;

• For styling, use style props.

import { IconWrapper } from "@fecapark-stack/react";

<IconWrapper style={{ width: 100, height: 100, borderRadius: "50%" }}>
  <svg>...</svg>
</IconWrapper>;

• Or in Tailwind,

import { IconWrapper } from "@fecapark-stack/react";

<IconWrapper className="w-12 h-12 rounded-lg">
  <svg>...</svg>
</IconWrapper>;

FullSlider

component

Use for slide items.
This slider's width size is browser's screen width(default, can customize max width).

demo

Usage

import { FullSlider } from "@fecapark-stack/react";

const items = [
  <div>1</div>,
  <div>2</div>,
  <div>3</div>,
  <div>4</div>,
  <div>5</div>,
];

<FullSlider items={items} cols={3} />;

• For styling, use style props.

import { IconWrapper } from "@fecapark-stack/react";

<FullSlider
  items={items}
  cols={3}
  style={{
    inActiveOpacity: 0.5,
    gap: 24,
    maxContainerWidth: 1200,
  }}
/>;

• style props (all props are optional)

| name | description | type | default value | | ----------------- | ------------------------------------------- | --------------- | ------------- | | inActiveOpacity | Opacity value of not focused items. | number | 0.5 | | gap | Gap size between slider items. | number(pixel) | 48(px) | | maxContainerWidth | Max slider view width about window resizing | number(pixel) | Infinity |

useFunnel

hooks

Use for optimize sequential form contents.

Simple implementation of @toss/slash/useFunnel.

• references below
• docs
• github

Usage

import { useFunnel } from "@fecapark-stack/react";

type FunnelStepsType = "Content1" | "Content2" | "Content3";

function Component() {
  const [Funnel, setStep] = useFunnel<FunnelStepsType>("Content1"); // initial step

  return (
    <Funnel>
      <Funnel.Step name="Content1">
        <AnyContent1 onSubmit={() => setStep("Content2")} />
      </Funnel.Step>

      <Funnel.Step name="Content2">
        <AnyContent2 onSubmit={() => setStep("Content3")} />
      </Funnel.Step>

      <Funnel.Step name="Content3">
        <AnyContent3 />
      </Funnel.Step>
    </Funnel>
  );
}