Atomic Library
this is a library of react components and other useful functions for development
Installation
npm
npm install atomic-library-core
yarn
yarn add atomic-library-core
Demo
This is little demo about containers, all of them are basically the same component, the difference is that each one return a sematic tag
import {
Box,
Header,
Main,
Aside,
Footer,
AtomicContext
} from 'atomic-library-core'
function App() {
const [state, setState] = useState(false)
return (
<>
<Box
atmClass="grid grid-cols-3 gap:10px m-4"
areas={`
'header header header'
'main main aside'
'footer footer footer'
`}
>
<AtomicContext.Provider value={`rounded ${state ? "bg:#808B96" : "bg:#D5D8DC"}`}>
<Header atmClass="h:80px area:header"/>
<Main atmClass="flex flex-wrap gap:10px area:main bg:none .first{ rounded-5 } ">
<Box atmClass="h:150px w-full" className='first'/>
<Box atmClass="h:150px w-full"/>
<Box atmClass="h:150px w-full"/>
</Main>
<Aside atmClass="h:400px area:aside"/>
<Footer atmClass="h:80px area:footer"/>
</AtomicContext.Provider>
</Box>
</>
)
}
export default App
Note
this is the new version of my-library-core