solid-corner-smoothing v0.2.6

Solid corner smoothing

This is a component package used to create smooth curved corners for solidJS. You can use it easily for basic tags or a solid-styled-components.

From version 0.2.0 will support solid-start and the documentation has been changed

:point_right: Link demo

Installation

npm install solid-corner-smoothing
pnpm install solid-corner-smoothing
yarn add solid-corner-smoothing

Usage

Import

import SolidCornerSmoothing from 'solid-corner-smoothing';

Basic

const App = () => {
  return (
    <div>
      <SolidCornerSmoothing
        class="box"
        options={{
          cornerRadius: 40,
          cornerSmoothing: 0.8,
          reSize: true,
          preserveSmoothing: true,
        }}
      >
        This is box
      </SolidCornerSmoothing>
    </div>
  );
};

export default App;

Using with reactivity

you can use react and have to enable reSize prop to be able to change element state according to it

const [radius, setRadius] = createSignal(60);
const [smoothing, setSmoothing] = createSignal(0.7);

return (
  <div>
    <SolidCornerSmoothing
      class="box"
      options={{
        cornerRadius: radius(),
        cornerSmoothing: smoothing(),
        preserveSmoothing: true
        reSize: true
      }}
    >
      This is box
    </SolidCornerSmoothing>
  </div>
);

Wrapper

pass the tag name as a string to the wrapper prop that will be used as the root tag

return (
  <div>
    <SolidCornerSmoothing
      class="box"
      wrapper="form"
      options={{ cornerRadius: 60, cornerSmoothing: 0.8 }}
    >
      This is box
    </SolidCornerSmoothing>
  </div>
);

Solid-styled-components

You can also pass a style-components to the wrapper prop to generate the root tag

const Btn = styled('button')`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  border: none;
`;

return (
  <div>
    <SolidCornerSmoothing
      wrapper={Btn}
      options={{
        cornerRadius: 30,
        cornerSmoothing: 0.8,
        backgroundColor: '#ddd',
        border {
          color: "tomato",
          size: 2
        }
      }}
    >
      This is button
    </SolidCornerSmoothing>
  </div>
);

Use css

Background color can be used via css or options props, border color can only be passed through options props. (the colors passed options props also accept css variables)

return (
  <div>
    <SolidCornerSmoothing
      class="box"
      wrapper="button"
      options={{
        cornerRadius: 30,
        cornerSmoothing: 0.8,
        preserveSmoothing: true
        border: {
          color: "tomato",
          size: 2
        }
      }}
    >
      This is button
    </SolidCornerSmoothing>
  </div>
);

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  background-color: gray;
}

Props

Options