A catalogue of React components, focused on ease-of-use.
To install the core package, run:
yarn add practical-react-components-coreThis contains all the core components. All the icons are located in a separate practical-react-components-icons package.
Practical react components is dependent on some packages, in addition to react
and react-dom, that need to be installed for it to work. Make sure the
following packages are installed:
yarn add styled-components
yarn add react-transition-group
yarn add pepjsIf you are using practical-react-components-formik you also need to make sure the following packages are installed:
yarn add formikInstall additional typings:
yarn add @types/styled-componentsIf you use Typescript and want to use styled-components, you need to add a
file to your source directory, e.g.:
styled-components.d.tswith the following contents:
import 'styled-components'
import { Theme } from './theme'
declare module 'styled-components' {
export interface DefaultTheme extends Theme {}
}in which case you should get proper typings for the theme prop in your own
styled components.
Make sure this file is included in your tsconfig.json files, e.g.
"include": ["src/styled-components.d.ts", "./src/index.ts"].
If you are using Practical react components with an Electron app you might have
to add the following lines in the root of you package.json file.
"electronWebpack": {
"whiteListedModules": [
"practical-react-components-core",
"styled-components"
]
}Practical react components makes use of contexts to provide theme and toast
creators. To make it possible to use the components, you need to wrap your app
in a PracticalProvider.
On the provider you can optionally specify a theme and behaviors for toasts.
export const Entry: React.FC = () => {
return (
<PracticalProvider>
<App />
</PracticalProvider>
)
}In your app, you can then start using Practical react components:
export const App: React.FC = () => {
const [text, setText] = useState()
const { showSuccessToast } = useToasts()
return (
<AppContainer>
<TextInput onValueChange={setText} />
<SpaceBlock variant={16} />
<Button
label="Yay"
onClick={() => showSuccessToast({ label: `You wrote: ${text}` })}
/>
</AppContainer>
)
}For more information on what components are available and how to use them please visit the documentation.
Code and icons in these packages are licensed under the MIT license, except for icons in practical-react-components-icons from, or icons based on, Material Design icons by Google (licensed under the Apache License 2.0).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent