@atomic-layout/core
Atomic Layout core library.
Please note that as a user of Atomic Layout you are not supposed to use this package directly in your application. It serves as a logic abstraction for various rendering implementations (with styled-components, emotion, etc.). Use this package if you are planning to introduce a new styling implementation of Atomic Layout.
Motivation
Atomic Layout contains its core functionality in a separate module in order to reuse it for various styling implementations (styled-components
, emotion
, etc.). The logic distributed in this module is style-agnostic and mainly concerns calculations and transformations of data structures used by the library. It also provides common type definitions to be used by Atomic Layout, or its consumers.
Scope
Atomic Layout core operates under the following scope:
Layout interface
-
Layout
instance to be exposed by each individual styling implementation of the library - Interface to consume layout options (
defaultUnit
,breakpoints
, etc.) - Interface to store the provided options and reference them
Breakpoint transformation
- Breakpoint parsing (
getAreaRecords
) - Breakpoint transformations (
mergeBreakpoints
,openBreakpoint
,closeBreakpoint
) - Breakpoint compiling (
createMediaQuery
)
Media Query handling
- Normalization of media queries (
normalizeMediaQuery
)
Utilities
- String utilities (i.e.
toCammelCase
,toLowerCaseFirst
) - Math utilities (i.e.
transformNumeric
) - Functional utilities (i.e.
compose
,when
,memoizeWith
)
Type definitions
Refer to the complete type definition module
atomic-layout/core/lib/index.d.ts
.
The common use case to access the types exported by this package is to provide a proper type annotation to your custom React components that accept the same props as the library's components do (Box
, Composition
, Only
, etc.).
Here's an example of how to annotate a custom React component that accepts all the props that the Box
component does:
import * as React from 'react'
import { BoxProps } from 'atomic-layout/core'
const MyComponent: React.FC<BoxProps & MyComponentProps> = ({
children,
...boxProps
}) => {
return <Box {...boxProps}>{children}</Box>
}
Contributing
Fork the repository
Fork this repository using the "Fork" button on the top right of the repository page.
Follow Git workflow
Please follow the Git workflow described in the contribution guidelines to the original library.
License
MIT.