@doruk/components
v3.1.1
Published
:sun_with_face:
Downloads
25
Readme
import { Button, Loader } from "@doruk/components"
const aButton = () => (
<Button accent="success">
Hello world!
</Button>
);
const aLoader = () => (
<Loader size="md" fill="rebeccapurple" />
);
const overlayedLoader = () => (
React.createPortal(
<Loader
variant="rect5"
fullscreen={{
bg: { color: "rgba(0,0,0,.5)", tint: 9 }
}}
/>,
document.getElementById("loader")
)
);
const yetAnotherLoader = () => (
<Loader
size="xs"
fullscreen="rgba(0,0,0,.6)"
/>
);Button
prop | type | description | default ---|---|:-:|---| accent | string | one of; primary, secondary, success, error, warning | primary
Loader
prop | type | description | default ---|---|:-:|--:| fullscreen | string|{color,tint} | overlay loader over <body>| {color:"mistyrose",tint:3} fill|string|fill of the SVG elements| - stroke|string|stroke of the SVG elements| - size|string|one of; xs, sm, md, lg, xl|sm variant|string|one of: spin1, spin2, spin3, rect1, rect2, rect3, rect4, rect5|spin1
rest
Ul Li Main P Span Nav Div Section H1 H2 H3 H4 H5 H6 A Article Aside Audio B Br Caption Code Footer Header Hr I Iframe Img Input Li Main Ol Option P Picture Pre Progress Select Source Table Tbody Td Textarea Tfoot Th Thead Tr U Ul Video
CSS reset & normalize
import { Normalize, Reset, Main } from "@doruk/components"
const App = () => (
<Main>
<Reset />
<Normalize />
</Main>
);or
import { normalize, reset, Section } from "@doruk/components"
const GlobalStyle = styled.createGlobalStyle`
${reset}
${normalize}
`;
const App = () => (
<Section>
<GlobalStyle />
</Section>
);Load from CDN
<script src="https://unpkg.com/@doruk/components"></script>Then the library is available as _components; i.e. window._components.Button