React-sunny NPM

:butterfly::sunny: react-sunny :sunny::hatched_chick:

React Sunny is just a group of useful components that I re-use in my websites. It includes the components Container, Text, Dropdown, and Responsive. It may not be the most useful to anybody else but I like it :blush: I really just wanted to see if I could successfully finish a project with proper documentation and publish it to the npm registry :eyes:

Installation

1. Install the package with npm.

npm install react-sunny

2. Use the components in your project!

import { Container, Text, Responsive, Dropdown } from 'react-sunny'

Components

Container :package:

The Container component is a div with flex-box built-in so you dont have to worry about vertical and horizontal centering or any of that nonsense. It also comes with some other style props that you can use to make writing your code just a little bit cleaner :stuck_out_tongue_winking_eye:

Props

name	type	default	options	description
`id`	string	empty string	none	The id of the generated div.
`classes`	string	empty string	none	List of classes that apply to the generated div.
`styles`	object	empty object	none	Any in-line styles to be applied to the generated div.
`width`	string	empty string	any	Width of the generated div.
`height`	string	empty string	any	Height of the generated div.
`direction`	string	`column`	`column`, `row`	The direction of the flex-box.
`alignment`	string	`center center`	`center`, `start`, `end`, `around`, `between`, `baseline`, `stretch`	The alignment of the flex-box. The first alignment is on the main axis of the direction property, and the second is on the secondary axis.
`gap`	string	empty string	`column`, `row`, package variables	The gap of the flex-box. The first word is the direction and the second is the size of the gap. Can have up to 2 gaps. Sizes can be from package variables or regular HTML size values.
`position`	string	`relative`	`relative`, `absolute`, `fixed`, `sticky`	The position property of the generated div.
`fill`	string	empty string	`width`, `height`, `parent`, `screen`, `auto`, `none`	The way in which the div generated wants to fill space.
`padding`	string	empty string	`all`, `top`, `right`, `bottom`, `left`, package variables	The padding property of the div generated. The first word is the position and the second is the size of the padding. Can have up to 4 paddings. Sizes can be from package variables or regular HTML size values.
`margin`	string	empty string	`all`, `top`, `right`, `bottom`, `left`, package variables	The margin property of the div generated. The first word is the position and the second is the size of the margin. Can have up to 4 margins. Sizes can be from package variables or regular HTML size values. Size from variables can be negative as well. e.g. "bottom 50% top -medium"
`color`	string	empty string	package variables	The background-color property of the div generated. Will take a hex code or a package variable.
`canClick`	boolean	`false`	`true`, `false`	If the div is clickable, i.e. if pointer-events are turned on or not. Also changes the cursor to pointer.
`extras`1	any	none	none	Any other properties to be passed directly to the generated div, i.e. events or anything else I forgot.
`ref`	ref	none	none	A React ref to be passed to the div.

1 extras is not a prop exactly, you dont pass extras = { blah }, but you simply pass the extra properties themselves and it gets captured and passed on directly to the div component. For example, putting extras = {{ onClick: () => click('test') }} will not work, but putting onClick = { () => click('text') } will pass the onClick property to the div. extras just means any other arguments passed. See example for more.

Example

<Container fill = 'parent' classes = 'rounded-container' alignment = 'around center' color = 'base-2' padding = 'all medium'>
    <Container fill = 'parent' direction = 'row' alignment = 'start center'>
        <Container styles = {{ aspectRatio: '1/1' }} classes = 'rounded-container' fill = 'parent' color = 'red' padding = 'all medium' position = 'relative' canClick onClick = { () => console.log('red') }>
            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
        </Container>
        <Container direction = 'row' styles = {{ aspectRatio: '1/1' }} classes = 'rounded-container' fill = 'parent' color = 'blue' margin = 'left small right small' padding = 'all medium' position = 'relative' canClick onClick = { () => console.log('blue') }>
            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
        </Container>
        <Container styles = {{ aspectRatio: '1/1' }} classes = 'rounded-container' fill = 'parent' padding = 'all medium' position = 'relative'>
            <Container styles = {{ top: 0, left: 0 }} fill = 'parent' position = 'absolute'>
                <Container direction = 'row' classes = 'rounded-container' fill = 'parent' margin = 'bottom x-small' padding = 'all medium' color = 'yellow' position = 'relative' canClick onClick = { () => console.log('yellow') }>
                    <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
                    <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
                </Container>
                <Container direction = 'row' classes = 'rounded-container' fill = 'parent' margin = 'top x-small' padding = 'all medium' position = 'relative'>
                    <Container direction = 'row' styles = {{ top: 0, left: 0 }} fill = 'parent' position = 'absolute'>
                        <Container direction = 'row' classes = 'rounded-container' fill = 'parent' margin = 'right x-small' padding = 'left x-small right x-small top medium bottom medium' color = 'green' position = 'relative' canClick onClick = { () => console.log('green') }>
                            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
                            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
                        </Container>
                        <Container direction = 'row' classes = 'rounded-container' fill = 'parent' margin = 'left x-small' padding = 'left x-small right x-small top medium bottom medium' color = 'purple' position = 'relative' canClick onClick = { () => console.log('purple') }>
                            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
                            <Container classes = 'rounded-container' styles = {{ backdropFilter: 'brightness(80%)' }} fill = 'parent' margin = 'all small' position = 'relative' canClick/>
                        </Container>
                    </Container>
                </Container>
            </Container>
        </Container>
    </Container>
</Container>

Text :abc:

The Text component is just an easier way to work with text and allows you to quickly change styles cleanly with less code.

Props

name	type	default	options	description
`id`	string	empty string	none	The id of the generated text.
`classes`	string	empty string	none	List of classes that apply to the generated text.
`styles`	object	empty object	none	Any in-line styles to be applied to the generated text.
`color`	string	empty string	package variables	The color property of the generated text. Will take a hex code or a package variable.
`size`	string	empty string	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`	The size of the generated text.
`padding`	string	empty string	`all`, `top`, `right`, `bottom`, `left`, package variables	The padding property of the div generated. The first word is the position and the second is the size of the padding. Can have up to 4 paddings. Sizes can be from package variables or regular HTML size values. Size from variables can be negative as well. e.g. "bottom 50% top -medium"
`margin`	string	empty string	`all`, `top`, `right`, `bottom`, `left`, package variables	The margin property of the div generated. The first word is the position and the second is the size of the margin. Can have up to 4 margins. Sizes can be from package variables or regular HTML size values. Size from variables can be negative as well. e.g. "bottom 50% top -medium"
`italic`	boolean	`false`	`true`, `false`	Whether the text is italicized or not.
`underline`	boolean	`false`	`true`, `false`	Whether the text is underlined or not.
`weight`	string	empty string	`normal`, `bold`, `light`	The font weight of the generated text.
`alignment`	string	empty string	`center`, `left`, `right`, `justify`	The alignment of the generated text.
`href`	string	empty string	none	The `href` attribute of the text, if not empty then the text will be wrapped in an anchor element.
`canClick`	boolean	`false`	`true`, `false`	If the div is clickable, i.e. if pointer-events are turned on or not. Also changes the cursor to pointer.
`extras`1	any	none	none	Any other properties to be passed directly to the generated text, i.e. events or anything else I forgot.

1 extras is not a prop exactly, you dont pass extras = { blah }, but you simply pass the extra properties themselves and it gets captured and passed on directly to the generated text. For example, putting extras = {{ onClick: () => click(value) }} will not work, but putting onClick = { () => click(value) } will pass the onClick property to the generated text. extras just means any other arguments passed. See example for more.

Example

<Container fill = 'parent' color = 'accent-1'>
    <Text size = 'h1' weight = 'normal'>
        This text is large! but not bold 😭
    </Text>
    <Text size = 'h2' color = 'blue'>
        This text is large but not THAT large. It's also blue.
    </Text>
    <Text size = 'h3' href = 'https://google.com'>
        This text is a pretty good size. (and you can click it!)
    </Text>
    <Text size = 'h4' italic>
        This text is a pretty small, honestly. (and italic)
    </Text>
    <Text size = 'p' underline>
        This text is small, but underlined.
    </Text>
</Container>

Responsive :mirror:

The Responsive component, mainly used in SSR projects like Next.js, conditionally renders based on the aspect ratio of the viewport.

Props

name	type	default	options	description
`portrait`	boolean	`false`	`true`, `false`	If the component's children should be rendered when the viewport has a `portrait` aspect ratio.
`landscape`	boolean	`false`	`true`, `false`	If the component's children should be rendered when the viewport has a `landscape` aspect ratio.

Hooks

name	type	options	returns
`isPortrait`	boolean	`true`, `false`	true if viewport is in a `portrait` orientation, false if viewport is in a `landscape` orientation.
`isLandscape`	boolean	`true`, `false`	true if viewport is in a `landscape` orientation, false if viewport is in a `portrait` orientation.

Example

<Container fill = 'parent'>
    <Responsive portrait>
        <Text size = 'h2' underline color = 'accent-1'>
            This gets shown when the device is in portrait.
        </Text>
    </Responsive>

    <Responsive landscape>
        <Container alignment = 'start start' fill = 'parent'>
            <Text size = 'h2' italic color = 'neutral-1'>
                This gets shown when the device is in landscape.
            </Text>
            <Text size = 'h3' weight = 'normal'>
                This too!
            </Text>
        </Container>
    </Responsive>
</Container>

Package Variables

To override the default variables for color, padding, and margin in the package, follow these steps:

Locate the react-sunny-styles folder or just download it from here.
Copy the folder into your application and import overrides.scss into your index/top-level page.

import './react-sunny-styles/overrides.scss'

Change any variables in variables.scss and it will override them everywhere.

Default Package Variable Values

Colors

name	light	dark	editable?
base-1	`#FFFFFF`	`#000000`	yes
base-2	`#F2F2F7`	`#1C1C1E`	yes
base-3	`#D1D1D6`	`#3A3A3C`	yes
neutral-1	`#000000`	`#FFFFFF`	yes
neutral-2	`#1D1D1F`	`#F2F2F7`	yes
neutral-3	`#424245`	`#D1D1D6`	yes
accent-1	`#007AFF`	`#007AFF`	yes
accent-2	`#32ADE6`	`#32ADE6`	yes
accent-3	`#55BEF0`	`#55BEF0`	yes
tertiary-1	`#FA3B2F`	`#FA3B2F`	yes
tertiary-2	`#F92B53`	`#F92B53`	yes
tertiary-3	`#FA6A86`	`#FA6A86`	yes
clear	`#00000000`	`#00000000`	no
extra-1	`#000000`	`#000000`	yes
extra-2	`#000000`	`#000000`	yes
extra-3	`#000000`	`#000000`	yes
white	`#FFFFFF`	`#FFFFFF`	no
black	`#000000`	`#000000`	no
gray-1	`#8E8E93`	`#8E8E93`	no
gray-2	`#AEAEB2`	`#636366`	no
gray-3	`#C7C7CC`	`#48484A`	no
gray-4	`#D1D1D6`	`#3A3A3C`	no
gray-5	`#E5E5EA`	`#2C2C2E`	no
gray-6	`#F2F2F7`	`#1C1C1E`	no
red	`#FA3B2F`	`#FA3B2F`	no
orange	`#FF9500`	`#FF9500`	no
yellow	`#FFCC02`	`#FFCC02`	no
green	`#35C759`	`#35C759`	no
blue	`#007AFF`	`#007AFF`	no
purple	`#5856D5`	`#5856D5`	no
pink	`#FF6482`	`#FF6482`	no